Skip to content
This is a customizable modal with react-portal.
JavaScript CSS
Branch: master
Clone or download
Latest commit 219f1ae Sep 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples/src use dist code Sep 8, 2019
src add use-modal Sep 8, 2019
.babelrc initial commit Sep 6, 2019
.gitignore initial commit Sep 6, 2019
.npmignore add .travis.yml Sep 7, 2019
.travis.yml add travis ci setting Sep 7, 2019
README.md adjust Sep 13, 2019
package-lock.json add demo settings Sep 8, 2019
package.json put react and react-dom to devDependencies Sep 9, 2019
webpack.config.js add demo settings Sep 8, 2019

README.md

useModal

Build Status

This is a react hook which can open the modal easily.

Usage

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

const App = () => {
  const [Modal, open, close] = useModal('root');
  return (
    <div>
      <button onClick={open}>OPEN</button>
      <Modal>
        <div className={styles.modal}>
          <h1>Title</h1>
          <p>This is a customizable modal.</p>
          <button onClick={close}>CLOSE</button>
        </div>
      </Modal>
    </div>
  );
};
render(<App />, document.getElementById('root'));

Syntax

[ModalComponent, openFunc, closeFunc] = useModal(domNode)

ModalComponent
Modal component that displays children in the screen center.

openFunc
A function to open modal.

closeFunc
A function to close modal.

domNode
Modal component uses React-Portal. You can specify the output destination domNode with this argument

Demo

https://shibe97.github.io/react-hooks-use-modal/

How To Develop

Setup

$ npm install

Build

$ npm run build

Example

$ npm start

http://localhost:3001

License

MIT

You can’t perform that action at this time.