@breadhead/use-modal
v1.2.0
Published
React hook for easy work with modals
Downloads
1
Readme
use-modal
Extra simple react hook for easily works with URL-oriented modals. Works with any client router.
Installation
yarn add @breadhead/use-modal
Warning! Lib uses
@breadhead/use-query
for handling query. Please, install and setup it.
Usage
It provides <ModalContextProvider />
, which makes the lib available to the rest of your app:.
// ModalContextApp.js
import { ModalContextProvider } from "@breadhead/use-modal";
import App from './App';
export class QueryContextApp {
public render() {
const pushRoute = (url) => {
// change route by any router
}
return (
<ModalContextProvider pushRoute={pushRoute}>
<App />
</ModalContextProvider>
);
};
}
Now, you can use useModalState
and useModalActions
in any place of your app.
// ContactsModal.jsx
import { useModalState, useModalActions } from "@breadhead/use-modal";
const MODAL_KEY = 'myUniqKey';
export const ContactsModal = () => {
const modalValue = useModalState(MODAL_KEY);
const { open, close } = useModalActions(MODAL_KEY);
// ...some code
return (
<>
<button onClick={() => open('42')}>OPEN</button>
{!!modalValue && (
<div>
<h1>It is modal {modalValue}!</h1>
<button onClick={close}>CLOSE</button>
</div>
)}
</>
)
};
If you want use it with SSR, just read the documentation of @breadhead/use-query
.