react-portal-modal

This is a Customizable Modal.

Usage

import React, { useState, useCallback } from 'react';
import { render } from 'react-dom';
import Modal from 'react-portal-modal';
import styles from './styles.module.css';

const App = () => {
  const [isOpen, setOpen] = useState(false);
  const open = useCallback(() => setOpen(true), [setOpen]);
  const close = useCallback(() => setOpen(false), [setOpen]);
  return (
    <div>
      <button onClick={open}>OPEN</button>
      <Modal isOpen={isOpen} close={close}>
        <div className={styles.modal}>
          <h1>Title</h1>
          <p>This is a react-portal-modal.</p>
        </div>
      </Modal>
    </div>
  );
};
render(<App />, document.getElementById('root'));

Props

| property | Required | Type | description | example | default | | :-------- | :------- | :------- | :------------------------------------------ | :-------------------- | :------ | | isOpen | required | Boolean | whether the modal is open | false | false | | close | required | Function | close the modal | - | - | | elementId | option | String | an element id for which the modal is output | 'root', 'app', etc... | 'root' |

How To Develop

Setup

$ npm install

Build

$ npm run build

Example

$ npm start

http://localhost:3001

License

MIT