# cr-react-ui

> neigri个人react-UI

Latest version **1.0.8** (published 2020-07-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install cr-react-ui
pnpm add cr-react-ui
yarn add cr-react-ui
bun add cr-react-ui
```

## 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.8 |
| Published | 2020-07-23 |
| First published | 2020-03-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 31.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | neigri |
| Maintainers | neigri |

## Links

- npm: https://www.npmjs.com/package/cr-react-ui
- Repository: https://github.com/KO-Good-code/cr-react-ui
- Issues: https://github.com/KO-Good-code/cr-react-ui/issues
- npm.io page: https://npm.io/package/cr-react-ui

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.13.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.0

## Recent versions

- 1.0.8 (latest) — 2020-07-23
- 1.0.7 — 2020-07-20
- 1.0.6 — 2020-06-11
- 1.0.5 — 2020-03-21
- 1.0.4 — 2020-03-10
- 1.0.3 — 2020-03-10
- 1.0.2 — 2020-03-10
- 1.0.1 — 2020-03-10
- 1.0.0 — 2020-03-10

## README

# neigri 个人react 组件

## Install
```cmd
npm install cr-react-ui

yarn add cr-react-ui

```
## Usage
使用组件
```js
import React, {useEffect, useState} from 'react';
import ReactDom from 'react-dom';
import { Model, Drawer } from 'cr-react-ui'
import 'cr-react-ui/lib/index.css'

function App(param) { 

  const [visvble, set ] = useState(false)
  const [visvble1, set1 ] = useState(false)

  return (
    <div className="main">
      <div onClick={() => set(true)}>click</div>
      <div onClick={() => set1(true)}>click</div>
      <Model  visvble={visvble} onCancel={() =>set(false)}>
        <div className="box">
        </div>
      </Model>
      <Drawer visvble={visvble1} zIndex={1001} onCancel={() =>set1(false)}>
        <div className="box"></div>
      </Drawer>
    </div>
  )
 }

ReactDom.render(<App />, document.getElementById('root'));

```
### 按需加载
 如果你使用了 babel，那么可以使用 babel-plugin-import 来进行按需加载，加入这个插件后。配置```.babelrc.js```文件：
```js
module.exports = {
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    [
      "import",{
        "libraryName": "cr-react-ui",
        "libraryDirectory": "lib",
        customName: (name) => {
          return `cr-react-ui/lib/${name}` // 核心配置 根据你自己的组件目录配置
        },
        customStyleName: (name) => {
          return `cr-react-ui/lib/${name}/index.css`
        }
      },
    ]
  ]
}

```
### 1.弹窗 Model
```js
import { Model } from 'cr-react-ui'

<Model  visvble={visvble} onCancel={() =>set(false)}>
  <div className="box">
  </div>
</Model>
```
##### API
| 属性 | 说明 | 类型 | 默认值 |
| ------------ | ------------- | ------------ | ------------- |
| visible | 对话框是否可见  | boolean | - |
| maskClosable | 点击蒙层是否允许关闭  | boolean | false  |
| zIndex | 设置 Modal 的 z-index  | Number | 1000  |
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调  | function(e) | - |

### 2.抽屉 Drawer
```js
import { Drawer } from 'cr-react-ui'

<Drawer visvble={visvble1} zIndex={1001} onCancel={() =>set1(false)}>
  <div className="box"></div>
</Drawer>
```
##### API
| 属性 | 说明 | 类型 | 默认值 |
| ------------ | ------------- | ------------ | ------------- |
| visible | 对话框是否可见  | boolean | - |
| maskClosable | 点击蒙层是否允许关闭  | boolean | false  |
| zIndex | 设置 Modal 的 z-index  | Number | 1000  |
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调  | function(e) | - |
| position | 抽屉的方向  | top right bottom left | top |

### 3.消息提示 Toast
```js
import { Toast } from 'cr-react-ui'

Toast.warning(text) 警告消息
Toast.error(text)  错误消息
Toast.success(text) 成功消息

```

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