React Modal

Lightweight react modal component. Demo can be found here: Click

Installation

npm i lightweight-react-modal

Usage

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

<Modal>
    <ModalHeader>
        Modal Header.
    </ModalHeader>
    <ModalContent>
        Modal Content.
    </ModalContent>
    <ModalFooter>
        Modal Footer.
    </ModalFooter>
</Modal>

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:

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

const ModalExample = ({ modal }) => (
    <>
        <button
            type="button"
            onClick={modal.toggle('modal_name')}
        >
            Toggle modal
        </button>
        {modal.isOpen('modal_name') ? (
            <Modal>
                <ModalContent>
                    Modal
                </ModalContent>
            </Modal>
        ) : null}
    </>
);

const App = () => (
    <ModalProvider>
        <ModalHookExample />
    </ModalProvider>
);

ReactDom.render(<App />, document.getElementById('app'));

Modal Context hook example:

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 (
        <>
            <button
                type="button"
                onClick={modal.toggle('modal_name')}
            >
                Toggle modal
            </button>
            {modal.isOpen('modal_name') ? (
                <Modal>
                    <ModalContent>
                        Modal
                    </ModalContent>
                </Modal>
            ) : null}
        </>
    );
};

const App = () => (
    <ModalProvider>
        <ModalHookExample />
    </ModalProvider>
);

ReactDom.render(<App />, 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. |