# @netless/react-mb-tool-box

> netless whiteboard react tool mobile box

Latest version **1.0.3** (published 2019-07-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @netless/react-mb-tool-box
pnpm add @netless/react-mb-tool-box
yarn add @netless/react-mb-tool-box
bun add @netless/react-mb-tool-box
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-07-06 |
| First published | 2019-07-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 2 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | alwaysmavs |
| Maintainers | netless-rick |

## Links

- npm: https://www.npmjs.com/package/@netless/react-mb-tool-box
- npm.io page: https://npm.io/package/@netless/react-mb-tool-box

## Dependencies (2)

- [antd](https://npm.io/package/antd.md) ^3.17.0
- [rc-tween-one](https://npm.io/package/rc-tween-one.md) ^2.4.1

## Recent versions

- 1.0.3 (latest) — 2019-07-06
- 1.0.2 — 2019-07-06
- 1.0.1 — 2019-07-06

## README

# @netless/react-tool-box

> 一个和 `netless` 白板的工具切换组件，可以在您的白板项目中直接使用，也可以参考其中的代码逻辑自己实现。

[![NPM](https://img.shields.io/npm/v/@netless/react-tool-box.svg)](https://www.npmjs.com/package/@netless/react-tool-box) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## 1. 说明

本项目技术选型为：`React` `Typescript `
打包工具为： `rollup`  

## 2. 安装

```bash
npm install --save @netless/react-tool-box

或者

yarn add @netless/react-tool-box
```

## 3. 接口说明

**自定义类型说明**

```typescript
export type Color = [number, number, number];
export type MemberState = {
    currentApplianceName: string;
    strokeColor: Color;
    strokeWidth: number;
    textSize: number;
};

export enum customerComponentPositionType {
    middle = "middle",
    end = "end",
    head = "head",
}
```

| 参数                       | 说明               | 类型                                         | 默认值 |
| :------------------------- | :----------------- | :------------------------------------------- | :----: |
| memberState                | 教具状态           | MemberState                                  |        |
| setMemberState             | 设置教具状态       | (modifyState: Partial<MemberState>) => void; |        |
| customerComponent?         | 三方按钮           | React.ReactNode[]                            |        |
| customerComponentPosition? | 三方按钮插入的位置 | customerComponentPositionType                |        |



## 4. 使用概览

```tsx
import * as React from "react";
import ToolBox from "@netless/react-tool-box";

export default class ToolBoxExample extends React.Component<{}, {}> 
  render () {
    return (
      <ToolBox
        // 用于教具条更新教具的状态
      	memberState={this.state.memberState}
        // 点击教具条可以更新教具
        setMemberState={this.setMemberState}
        // 在教具栏目中插入自定义的按钮，比如上次按钮
        customerComponent={[
          <UploadBtn/>,
        ]}/>
    )
  }
}
```

## 5. 启动项目测试案例

   后续补充

## 6. 项目截图

![react-tool-box-1](https://ohuuyffq2.qnssl.com/react-tool-box-1.png)

## License

MIT © [alwaysmavs](https://github.com/alwaysmavs)

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