React Modal

Lightweight react modal component.

Demo can be found here: Click

Installation

``bash
npm i lightweight-react-modal
`

Usage

`jsx static
import React from 'react';
import {
Modal,
ModalHeader,
ModalContent,
ModalFooter,
} from 'lightweight-react-modal';



Modal Header.


Modal Content.


Modal Footer.


`

PropTypes

##### Modal

| Name | Type | Description | Default value |
| --- | --- | -- | -- |
| onClose | func | On close callback. | null |
| fluid | func | Sets the width and height to 90% of the screen. | false |
| closable | bool | Makes modal closable/unclosable. | true |
| maxHeight | number | Sets modal max height. | 500 |
| minHeight | number | Sets modal min height. | 100 |
| maxWidth | number | Sets modal max width. | 500 |
| minWidth | number | Sets modal min width. | 200 |
| customClassNames | { wrapper: string, modal: string, closeBtn: string, overlay:string } | Modal custom classNames. | null |
| closeButtonIcon | node | Modifies close button icon. | null |

##### ModalHeader, ModalContent, ModalFooter.

| Name | Type | Description | Default value |
| --- | --- | -- | -- |
| className | string | Applies extra className. | null |

Modal Context

You can use ModalContext to have better control of modal state in your application.
With help of ModalContext you can trigger one or multiple modals from anywhere in our application.

Usage

##### Default Example:

`jsx static
import React from 'react';
import ReactDom from 'react-dom';
import {
Modal,
ModalContent,
ModalProvider,
} from 'lightweight-react-modal';

const ModalExample = ({ modal }) => (
<>
type="button"
onClick={modal.toggle('modal_name')}
>
Toggle modal

{modal.isOpen('modal_name') ? (


Modal


) : null}

);

const App = () => (



);

ReactDom.render(, document.getElementById('app'));
`

##### Modal Context hook example:

`jsx static
import React from 'react';
import ReactDom from 'react-dom';
import {
Modal,
ModalContent,
ModalProvider,
useModalContext,
} from 'lightweight-react-modal';

const ModalHookExample = ({ modal }) => {
const modal = useModalContext();

return (
<>
type="button"
onClick={modal.toggle('modal_name')}
>
Toggle modal

{modal.isOpen('modal_name') ? (


Modal


) : null}

);
};

const App = () => (



);

ReactDom.render(, document.getElementById('app'));
``

PropTypes

ModalProvider methods

| Name | params | Description |
| --- | --- | -- |
| open(name) | name: string/number | opens modal. |
| close(name) | name: string/number | closes modal. |
| toggle(name) | name: string/number | toggles modal. |
| closeAll() | - | closes all opened modals. |
| isOpen(name) | name: string/number | checks if modal is opened. |
| isClose(name) | name: string/number | checks if modal is closed. |
| list | - | returns list of opened modals. |