# react-page-mask

> React 页面遮罩组件，函数触发，不污染 DOM。

Latest version **1.0.6** (published 2021-09-09) · 0 weekly downloads

## Install

```sh
npm install react-page-mask
pnpm add react-page-mask
yarn add react-page-mask
bun add react-page-mask
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2021-09-09 |
| First published | 2021-09-08 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 9.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | zhou |
| Maintainers | xfcdxg |
| Keywords | react-component, react, mask |

## Links

- npm: https://www.npmjs.com/package/react-page-mask
- Repository: https://github.com/xfcdxg/react-page-mask
- Homepage: https://github.com/xfcdxg/react-page-mask#readme
- Issues: https://github.com/xfcdxg/react-page-mask/issues
- npm.io page: https://npm.io/package/react-page-mask

## Dependencies (8)

- [ramda](https://npm.io/package/ramda.md) ^0.27.1
- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.0.1
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2021-09-09
- 1.0.5 — 2021-09-08
- 1.0.4 — 2021-09-08
- 1.0.3 — 2021-09-08
- 1.0.2 — 2021-09-08
- 1.0.1 — 2021-09-08
- 1.0.0 — 2021-09-08
- 0.1.0 — 2021-09-08

## README

# react-page-mask

React 页面遮罩组件，函数触发，不污染 DOM。

### 安装
```
  $ npm install react-page-mask
  // or
  $ yarn add react-page-mask
```
### DEMO
[React-Page-Mask]

### 引用

```js
  import Mask from 'react-page-mask'
```

### 使用方法

##### Mask(ReactNode, props)

```js
  const Layer = <div>content</div>

  // 基础用法
  Mask(Layer)

  // 深色遮罩
  Mask(Layer, { maskStyle: { opacity: .9 } })

  // 透明遮罩
  Mask(Layer, { mask: false })

  // 遮罩不可点击
  Mask(Layer, { maskClosable: false })

  // 遮罩关闭时处理逻辑
  Mask(Layer, { handleClose: () => {} })

  // 执行后返回关闭方法，可用于单独处理关闭
  const handleCloseMask = Mask(...)

  handleCloseMask()

  // 关闭所有遮罩，多层遮罩下使用
  Mask.closeAll()
```

### 可配置的Props

| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| mask | Boolean | true | 配置是否展示遮罩 |
| maskClosable | Boolean | true| 设置遮罩是否可被关闭|
| style | Object | {} | 遮罩容器的样式 |
| maskStyle | Object | {} | 遮罩层的样式 |
| contentStyle | Object | {} | 内容容器的样式，建议在弹出层设置，通用配置可能会屏蔽掉遮罩的点击|
| contentClass | String | '' | 内容容器的样式类，建议同上|
| containerClass | String | '' | 遮罩容器的样式类 |
| handleClose | Function | | 遮罩关闭时的处理事件|

[React-Page-Mask]:https://xfcdxg.github.io/react-page-mask/

---
_Source: https://npm.io/package/react-page-mask · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._