1.0.2 • Published 5 years ago

react-portal-modal v1.0.2

Weekly downloads
5
License
MIT
Repository
github
Last release
5 years ago

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

propertyRequiredTypedescriptionexampledefault
isOpenrequiredBooleanwhether the modal is openfalsefalse
closerequiredFunctionclose the modal--
elementIdoptionStringan 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