busyzz-1994/react-popup

react-popup

线上预览

https://busyzz-1994.github.io/react-popup/

开始

yarn add @busyzz/react-popup --save
#or
npm install @busyzz/react-popup --save

使用案例

import ReactPopup, { PopupProps } from '@busyzz/react-popup';
const App = () => {
  const [v, setV] = React.useState(false);
  const [position, setPosition] = React.useState<PopupProps['position']>(
    'center'
  );
  const onClick = (p: PopupProps['position']) => {
    setPosition(p);
    setV(true);
  };
  return (
    <div>
      <ReactPopup onClose={() => setV(false)} visible={v} position={position}>
        <h1>test</h1>
      </ReactPopup>
      <div>
        <button onClick={() => onClick('center')}>center</button>
      </div>
      <div>
        <button onClick={() => onClick('left')}>left</button>
      </div>
      <div>
        <button onClick={() => onClick('right')}>right</button>
      </div>
      <div>
        <button onClick={() => onClick('top')}>top</button>
      </div>
      <div>
        <button onClick={() => onClick('bottom')}>bottom</button>
      </div>
    </div>
  );
};

属性

属性	说明	类型	默认值
visible	显示/隐藏	boolean	false
position	内容出现的位置	'center'/'top'/'left'/'bottom'/'right'	center
mask	是否显示遮罩	boolean	true
maskClosable	点击遮罩自动关闭	boolean	true
onClose	关闭的回调	Function	()=>void
wrapClassName	添加到最外层容器的 class	string	-
destroyOnClose	关闭动画结束后是否删除节点	boolean	false