https://github.com/react-widget/popup
https://react-widget.github.io/popup/
https://github.com/react-widget/popup
popup react-widget
Last synced: 7 months ago
JSON representation
https://react-widget.github.io/popup/
- Host: GitHub
- URL: https://github.com/react-widget/popup
- Owner: react-widget
- Created: 2018-06-29T13:41:35.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T16:58:00.000Z (about 3 years ago)
- Last Synced: 2025-06-14T17:43:27.252Z (8 months ago)
- Topics: popup, react-widget
- Language: TypeScript
- Homepage:
- Size: 4.68 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-widget-popup
## 安装
```
npm install --save react-widget-popup
```
## 使用
[](https://codesandbox.io/s/mystifying-keller-i2xlv?fontsize=14&hidenavigation=1&theme=dark)
```jsx
import Popup from 'react-widget-popup';
import 'react-widget-popup/style';
export default function App(){
return (
test
)
}
```
### Interfaces
```ts
type statusTypes = 'unmounted' | 'exited' | 'entering' | 'entered' | 'exiting' ;
interface PopupProps extends React.HTMLAttributes {
/** 样式前缀 */
prefixCls?: string;
/** popup元素样式 */
style?: React.CSSProperties;
/** popupCSS样式名 */
className?: string;
/** popup根节点CSS样式名 */
rootClassName?: string;
/** popup根节点样式 */
rootStyle?: React.CSSProperties;
/** popup元素属性 */
rootProps?: React.HTMLAttributes;
/** 否显示popup(受控) */
visible?: boolean;
/** 使用fixed定位popup */
fixed?: boolean;
/** 初始不显示的情况下不渲染组件 */
lazy?: boolean;
/** 当destroyOnClose=false时，组件刷新时强制更新 */
forceRender?: boolean;
/** CSSTransition参数，参考：react-transition-group */
transition?: Partial;
/** 隐藏销毁弹组件 */
destroyOnClose?: boolean;
/** popup显示用于获取元素显示位置信息，大部分情况下建议直接用style */
getPosition?: (
dom: HTMLElement
) => {
top?: number | string;
left?: number | string;
right?: number | string;
bottom?: number | string;
};
/** 禁用mask */
disableMask?: boolean;
/** 是否开启遮罩层 */
mask?: boolean;
/** 遮罩层样式 */
maskStyle?: React.CSSProperties;
/** 遮罩层组件属性 */
maskProps?: React.HTMLAttributes;
/** 遮罩层样式名称 */
maskClassName?: string;
/** CSSTransition参数，参考：react-transition-group */
maskTransition?: Partial;
/** 内部使用 */
component?: React.ElementType;
/** 内部使用 */
maskComponent?: React.ElementType;
/** 内部使用 */
rootComponent?: React.ElementType;
/** 内部使用 */
wrapContent?: (node: React.ReactNode) => React.ReactNode;
}
```
### defaultProps
```js
{
prefixCls: "rw-popup",
style: {},
className: "",
rootClassName: "",
fixed: false,
lazy: true,
transition: {},
destroyOnClose: true,
disableMask: false,
mask: false,
maskStyle: {},
maskProps: {},
maskClassName: "",
maskTransition: {},
component: "div",
maskComponent: "div",
rootComponent: "div"
}
```
### 基础样式
```css
.rw-popup-root {
/* TODO */
}
.rw-popup {
position: absolute;
left: 0;
top: 0;
outline: 0;
}
.rw-popup-mask {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0.1;
}
.rw-popup-fixed,
.rw-popup-mask-fixed {
position: fixed;
}
```