REACT-MODALY
- Trusted by best UI frameworks
- Matching all your cases
- Developer friendly API
Example app
Component to render your modal into Portals.
Features
- Works through Portals.
- No UI. You can use any UI or create your own.
- Written on typescript.
- React hooks support.
- Very simple API.
- Dependecies free.
- 1kb size!!!
Install
npm install --save react-modaly
Usage
Step 1 - add modal Provider in project
Provider create modal context.
;;; const MODAL_NODE = document; const App = <ModalProvider node=MODAL_NODE> <div> <h1>Example app</h1> <Form /> </div> </ModalProvider>;
Step 2 - create modal component
Example modal window
// ./Example.js;; { const fill = ; return <Dialog icon="info-sign" onClose=close title="" isOpen> <div className=ClassesDIALOG_BODY> <p>Fill form with predefined data?</p> </div> <div className=ClassesDIALOG_FOOTER> <div className=ClassesDIALOG_FOOTER_ACTIONS> <Button intent="danger" onClick=cancel> Clear field </Button> <Button intent="primary" onClick=fill> Fill form </Button> </div> </div> </Dialog> );};
Step 3 - Now you can use modal
;;; ; const Form = { const framework setFramework = ; const isOpen open close = ; const handleClose = ; const handleSuccess = ; return <> <InputGroup placeholder="what the best framework" value=framework onChange= /> <Button text="Open example modal" onClick=open /> <Modal isOpen=isOpen as="section"> <ExampleModal close=close cancel=handleClose success=handleSuccess /> </Modal> </> ;}; ;
Custom DOM element
You can pass prop as
in Modal
component if you need to change internal div
element to any other.
<Modal isOpen=isOpen as="section">
Multiply modals
You can render modal into another modal because, Modal
component create wrapper into portal.
Use typescript
The react-modaly
source code is written in TypeScript,
so you can rest easy that react-modaly
's types will always be up-to-date.
Tips
- If you need to lock scroll use react-scrolllock
- If you need to focus lock inside your modal use react-focus-lock
Example app
Example app and code of example app
License
MIT © MerrickGit