Light React Modal

The idea behind this modal component is to keep it simple. The implementation is one file and it has no dependencies.

Install

• Npm: npm install light-react-modal --save-dev
• Yarn: yarn add light-react-modal --dev

Use

import useModal from 'light-react-modal';

const MyComponent() => {
        const [modal, openModal] = useModal(
            closeModal => (
                <div>
                    <h1>My Modal</h1>
                    <p>Content in modal</p>
                    <button onClick={closeModal}>
                        Close Modal
                    </button>
                </div>
            )
        )
        return (
            <div>
                <h1>My Page</h1>
                <p>Content on page</p>
                <button onClick={openModal}>
                    Open Modal
                </button>
                {modal}
            </div>
        )
    })

See the examples and the examples source code for more snippets to copy.

Help

If there are any examples you'd like to see or use cases I didn't cover, please file an issue.