JSPM – @busyzz/react-popup@0.2.0

Package Exports

@busyzz/react-popup

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@busyzz/react-popup) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

线上预览

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`