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.import { Provider as ModalProvider } from 'react-modaly';
import { config } from './modalConfig';
import Layout from './Layout';
const MODAL_NODE = document.getElementById('modal');
const App = () => (
<ModalProvider node={MODAL_NODE}>
<div>
<h1>Example app</h1>
<Form />
</div>
</ModalProvider>
);
Step 2 - create modal component
Example modal window// ./Example.js
import React from 'react';
import { Button, Classes, Dialog } from '@blueprintjs/core';
export default ({ success, cancel, close }) => {
const fill = () => success({ framework: 'react' });
return (
<Dialog icon="info-sign" onClose={close} title="" isOpen>
<div className={Classes.DIALOG_BODY}>
<p>Fill form with predefined data?</p>
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_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
import React, { useState, useCallback } from 'react';
import { useDialog, Modal } from 'react-modaly';
import { Button, InputGroup } from '@blueprintjs/core';
import ExampleModal from './ExampleModal';
const Form = () => {
const [framework, setFramework] = useState('');
const { isOpen, open, close } = useDialog();
const handleClose = useCallback(() => {
setFramework('');
close();
}, []);
const handleSuccess = useCallback(({ framework }) => {
setFramework(framework);
close();
}, []);
return (
<>
<InputGroup
placeholder="what the best framework"
value={framework}
onChange={e => setFramework(e.target.value)}
/>
<Button text="Open example modal" onClick={open} />
<Modal isOpen={isOpen} as="section">
<ExampleModal close={close} cancel={handleClose} success={handleSuccess} />
</Modal>
</>
);
};
export default Form;
Custom DOM element
You can pass propas
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
Thereact-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