Welcome to react-easy-popup 👋

🏠 Homepage

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

React + TypeScript 从零开发 Popup 组件并发布到 npm

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 git@github.com: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