🏠 Homepage
React Component based on ReactDOM.createPortal
function for transportation element.
React + TypeScript 从零开发 Popup 组件并发布到 npm
yarn add react-easy-popup
# or
npm i react-easy-popup
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>
</>
);
};
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 | '' |
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
yarn test
👤 海秋
Give a ⭐️ if this project helped you!
This README was generated with ❤️ by readme-md-generator