0.2.4 • Published 4 years ago
react-easy-popup v0.2.4
🏠 Homepage
React Component based on ReactDOM.createPortal function for transportation element.
Install
yarn add react-easy-popup
# or
npm i react-easy-popupUsage
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 startopen another terminal tab
cd example
yarn
yarn startRun tests
yarn testAuthor
👤 海秋
Show your support
Give a ⭐️ if this project helped you!
This README was generated with ❤️ by readme-md-generator