react-modal

A modal built on top of react-modal to fix the scrollable body in iOS.

Installation

$ npm install @moxy/react-modal

This library is written in modern JavaScript and is published in both CommonJS and ES module transpiled variants. If you target older browsers please make sure to transpile accordingly.

Usage

First, make sure to bind modal to your appElement.

import Modal from '@moxy/react-modal';

Modal.setAppElement('#yourAppElement');

Then use the component just like react-modal.

import React, { useState, useCallback } from 'react';
import Modal from '@moxy/react-modal';

const MyComponent = () => {
    const [isOpen, setOpen] = useState(false);

    const handleModalOpen = useCallback(() => {
        setOpen(true);
    }, []);

    const handleModalClose = useCallback(() => {
        setOpen(false);
    }, []);

    return (
        <>
            <button onClick={ handleModalOpen }>Open</button>
            <Modal isOpen={ isOpen } onRequestClose={ handleModalClose }>Modal content</Modal>
        </>
    );
};

export default MyComponent;

API

setAppElement

Wrapper around react-modal's setAppElement that binds the modal to the app element and locks the scroll on that element when a modal is open.

Modal

React component that locks the app element whenever a modal is open. Every prop passed to Modal will be passed to the base component (react-modal).

Tests

$ npm test
$ npm test -- --watch # during development

License

Released under the MIT License.