React Modal Component (draggable drawer in mobile devices)

✔️ A great package to easily create beautiful modal in React.

✔️ In desktop devices in modal and in mobile device is draggable drawer.

✔️ In mobile device can close modal with dragging like instagram modals.

✔️ Close the modal by dragging the top of the modal in mobile devices.

✔️ You can apply your own styles based on the class names.

✔️ Lock Body scroll when modal opened.

Examples

Test in mobile mode to test draggable.

Install


npm install --save rmodal-component

Usage


1 - Import component

import Modal from 'rmodal-component';import 'rmodal-component/dist/index.css'

2 - Add the component markup to your react component

import React, {useState} from 'react';
import Modal from 'rmodal-component';

const Example = () => {
    const [show, setShow] = useState(false);
    
    return (
        <div>
            <Modal show={show} onClose={() => setShow(false)} smModal={true} modalTitle={"modal Title"}>
                ...
            </Modal>
        </div>
    );
};

export default Example;

Props

NameDefaultTypeDescription
modalTitlerequiredstringset title for modal
showrequiredbooleanset true for show modal
onCloserequiredfunctionRuns when the modal is closing
smModalfalsebooleanReduces modal size
lockBodyScrollfalsebooleanset true for lock body scroll when modal opened