@angelplayer/react-modal-sheet

This package is a "Super Easy Modal Sheet" Component for React.

This package created by AngelPlayer

1. Install

$ npm i @angelplayer/react-modal-sheet

2. Example Code

1) Context API Setting

import { ModalProvider } from '@angelplayer/react-modal-sheet';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
    <React.StrictMode>
        <ModalProvider>
            <App />
        </ModalProvider>
    </React.StrictMode>
);

2) Import "Modal" Component, and "useModal" Hook

// App.tsx
import Modal, { useModal } from '@angelplayer/react-modal-sheet';

function App() {
    const { openModalId, handleShowModal, handleCloseModal, handleBgColor, handleMaxSize } = useModal();

    useEffect(() => {
        // Optional
        handleBgColor('#fff');
        handleMaxSize(1024);
    }, []);

    return (
        <div className='App'>
            <div className='btn-outer'>
                <button onClick={() => handleShowModal('id_greet')} className='show-modal-btn'>
                    Gretting
                </button>
                <button onClick={() => handleShowModal('id_thank')} className='show-modal-btn'>
                    Thanks
                </button>
            </div>

            <Modal id='id_greet' isOpen={openModalId === 'id_greet'}>
                <h1>World Greetings</h1>
                <img src='/greet.jpg' alt='greet' />
                <p>Konichiwa! (English)</p>
                <p>Nyahallo! (Japanese)</p>
                <p>Kikiriki! (German)</p>
            </Modal>

            <Modal id='id_thank' isOpen={openModalId === 'id_thank'}>
                <h1>World Thanks</h1>
                <img src='/thank.jpg' alt='greet' />
                <p>Thank you! (English)</p>
                <p>감사합니다! (Korean)</p>
                <p>ありがとうございます! (Japanese)</p>
                <p>Danke! (German)</p>
            </Modal>
        </div>
    );
}

export default App;

3. How to Use

1) Context API

<ModalProvider>
    <App />
</ModalProvider>

All you need to do to prepare for using the functionality is to wrap the App with a ModalProvider.

2) "Modal" Component

<Modal id='YOUR_ID' isOpen={openModalId === 'YOUR_ID'}>
    <h1>Lorem Ipsum</h1>
    <p>Lorem Ipsum</p>
</Modal>

Please write the tags you wish to display inside the Modal Component.

The Modal requires a unique identifier "id".

Pass the "id" created as a parameter to "isOpen".

3) "useModal" Hook

const { openModalId, handleShowModal, handleCloseModal, handleBgColor, handleMaxSize } = useModal();

You can customize the Modal Sheet by handling actions such as opening, closing, setting background color, and specifying maximum size.


Opening the Modal Sheet

<button onClick={() => handleShowModal('YOUR_ID')}'>
    Gretting
</button>

If you wish the Modal Sheet to open under specific circumstances, use "handleShowModal()".

Pass the "id" specified during the creation of the Modal as a parameter.


Setting Background Color

handleBgColor('COLOR_CODE');

You can change the background color of the Modal Sheet as desired.

Supports Hex Code and RGB values.


Specifying Maximum Size

handleMaxSize(NUMBER);

The Modal Sheet is implemented responsively by default, with a maximum width of 768px.

If you wish to adjust the maximum width according to the requirements of your service, please use "handleMaxSize()".

4. Video Usage Guide

Thank you for reading.

Happy Hacking!