🏠 Homepage

React Component based on ReactDOM.createPortal function for transportation element.

Install

yarn add react-easy-popup

# or

npm i react-easy-popup

Usage

import React, { useState } from 'react';
import { Popup } from 'react-easy-popup';
import 'react-easy-popup/dist/react-easy-popup.min.css';

export default () => {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <button onClick={() => setVisible(true)}>click me</button>
      <Popup maskClosable visible={visible} onClose={() => setVisible(false)}>
        <div className="your-content">hello world</div>
      </Popup>
    </>
  );
};

API

| Property | Description | Type | Default | | -------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------- | -------- | | visible | Optional，control content visibility | boolean | false | | position | Optional，determines where the content will pop up | 'center' / 'top' / 'bottom' / 'left' / 'right' | 'center' | | mask | Optional，decide whether to display the background layer | boolean | true | | maskClosable | Optional，if the value is true, clicking on the background layer will trigger onClose function | boolean | false | | onClose | Optional，a function to set the visible to false | function | ()=>{} | | node | Optional，the mounted node | HTMLElement | - | | destroyOnClose | Optional，whether content nodes are unloaded when closed | boolean | false | | wrapClassName | Optional，className for the container node | string | '' |

Contributions Welcome!

git clone [email protected]:worldzhao/react-easy-popup.git
cd react-easy-popup
yarn
yarn start

open another terminal tab

cd example
yarn
yarn start

Run tests

yarn test

Author

👤 海秋

Show your support

Give a ⭐️ if this project helped you!

This README was generated with ❤️ by readme-md-generator