A React library to help you keep track of your modal state using the URL.
- ☁️ Have URL's for modals
- 🔒 Encode all the parameters sent to a modal
- 🦄 Works on any framework since it uses the history api
- 📦 Headless and tiny
- 🚀 Supports React Portals
To create a new instance of modals you can import the URLModal and pass the modals you have in your application:
import { URLModal } from 'react-url-modal';
import { CreateAccount, EditAccount } from './Modals';
export const App = () => (
<URLModal
modals={{
createAccount: CreateAccount,
editAccount: EditAccount,
}}
/>
);To open this modal from any button in your application you can use the openModal function and pass the name of the modals and any params this modal needs:
import { openModal } from 'react-url-modal';
<button
onClick={() =>
openModal({
name: 'editAccount',
params: {
userId: user.id,
},
})
}
>
Edit your profile
</button>;Then in your modal you will have access to any param you passed to the modal:
const ModalWithParams = ({
params,
onClose,
}: {
params: { [key: string]: string },
onClose: () => void,
}) => (
<>
{params.userId}
<button onClick={onClose}>CloseModal</button>
</>
);You can also pass a Wrapper to the <URLModal> component and that component and that will wrap all your modals and will have access to the onClose function:
<URLModal
modals={{
customWrapper: CustomWrapperModal,
}}
Wrapper={({ onClose, children }) => (
<>
{children}
<button onClick={onClose} type="button">
x
</button>
</>
)}
/>To see all the available props you can check the API reference below.
<URLModal
modals={{
test: TestModal,
}}
/>| Parameter | Type | Description |
|---|---|---|
modals |
[name: string]: React Component or Promise<Component> |
Required |
Wrapper |
React Component |
A component to wrap each modal with |
usePortal |
boolean |
Should this modal be mounted on a portal |
portalElement |
HTML Element |
A component to mount the modals in, defaults to body |
Will open any modal you declared in modals by passing its name.
openModal({
name: 'createAccountForm'
params: {
hello: 'world'
}
})| Parameter | Type | Description |
|---|---|---|
name |
string |
Required. Name of the modal to open |
params |
{[key: string]: string} |
Any params this modal need |
Close all open modals.
openModal();Checks if a modal passed is open at the moment the function is called
isModalOpen('createAccountForm');| Parameter | Type | Description |
|---|---|---|
name |
string |
Required. Name of the modal to check open |
Useful if you want to open a modal by a link instead of a button. It will create the url fro 737F m the params passed.
router.push({
pathname: '/account',
query: {
modal: 'editAccount',
params: encodeUrlParams({
id: user.id,
}),
},
});| Parameter | Type | Description |
|---|---|---|
params |
Object |
Required. Object you want to encode |
Clone the project
git clone git@github.com:remoteoss/react-url-modal.gitGo to the project directory
cd react-url-modalInstall dependencies
yarnStart the server
yarn devTo open the example and test your changes please in another tab and run:
cd example
yarn && yarn devTo run tests, run the following command
yarn testTo run coverage you can run:
yarn test:coverage