# white-fast-web-sdk
> 
Latest version **1.0.2** (published 2019-10-08) · MIT license · 0 weekly downloads
## Install
```sh
npm install white-fast-web-sdk
pnpm add white-fast-web-sdk
yarn add white-fast-web-sdk
bun add white-fast-web-sdk
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support; large bundle.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-10-08 |
| First published | 2019-10-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 29 |
| Unpacked size | 10.5 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | netless |
| Maintainers | herewhite |
## Links
- npm: https://www.npmjs.com/package/white-fast-web-sdk
- npm.io page: https://npm.io/package/white-fast-web-sdk
## Dependencies (29)
- [antd](https://npm.io/package/antd.md) ^3.23.4
- [uuid](https://npm.io/package/uuid.md) ^3.3.2
- [react](https://npm.io/package/react.md) ^16.3.2
- [ali-oss](https://npm.io/package/ali-oss.md) ^6.1.1
- [is-color](https://npm.io/package/is-color.md) ^1.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.3.2
- [downloadjs](https://npm.io/package/downloadjs.md) ^1.4.7
- [html2canvas](https://npm.io/package/html2canvas.md) ^1.0.0-rc.3
- [react-color](https://npm.io/package/react-color.md) ^2.17.3
- [qrcode.react](https://npm.io/package/qrcode.react.md) ^0.9.3
- [query-string](https://npm.io/package/query-string.md) 5
- [rc-tween-one](https://npm.io/package/rc-tween-one.md) ^2.4.1
- [agora-rtc-sdk](https://npm.io/package/agora-rtc-sdk.md) ^2.8.0
- [rc-queue-anim](https://npm.io/package/rc-queue-anim.md) ^1.6.12
- [react-dropzone](https://npm.io/package/react-dropzone.md) 4.2.10
- [is-touch-device](https://npm.io/package/is-touch-device.md) ^1.0.1
- [react-draggable](https://npm.io/package/react-draggable.md) ^3.3.0
- [white-react-sdk](https://npm.io/package/white-react-sdk.md) ^2.3.6
- [react-identicons](https://npm.io/package/react-identicons.md) ^1.1.7
- [react-burger-menu](https://npm.io/package/react-burger-menu.md) ^2.6.10
- [react-clipboard.js](https://npm.io/package/react-clipboard.js.md) ^2.0.7
- [react-device-detect](https://npm.io/package/react-device-detect.md) ^1.9.10
- [@netless/fetch-middleware](https://npm.io/package/@netless/fetch-middleware.md) ^1.0.4
- [@netless/i18n-react-router](https://npm.io/package/@netless/i18n-react-router.md) ^1.0.5
- [@netless/react-loading-bar](https://npm.io/package/@netless/react-loading-bar.md) ^1.0.0
- [@netless/react-mb-tool-box](https://npm.io/package/@netless/react-mb-tool-box.md) ^1.0.3
- [@netless/react-seek-slider](https://npm.io/package/@netless/react-seek-slider.md) ^1.0.4
- [@netless/oss-upload-manager](https://npm.io/package/@netless/oss-upload-manager.md) ^1.0.6
- [@netless/react-scale-controller](https://npm.io/package/@netless/react-scale-controller.md) ^1.0.2
## Recent versions
- 1.0.2 (latest) — 2019-10-08
- 1.0.1 — 2019-10-08
- 1.0.0 — 2019-10-08
## README
English | [简体中文](./README-zh_CN.md) | [日本語](./README-jp.md)
⚡ Open source ultra fast whiteboard.
## 🎉 Quickstart
### Online
[codepen](https://codepen.io/buhe/pen/XWryGWO?editors=1000#0)
[jsrun#china](http://jsrun.pro/zmbKp/edit)
### Collaborative WhiteBoard
```html
```
### WhiteBoard Player
```html
```
## 📖 Documentation
When setting your whiteboard widget in code, you have several configs at your disposal all of which are described in detail below.
### WhiteBoard
To create a whiteboard, invoke a ```WhiteFastSDK.Room``` method in which you write the selected element in which you want to add the whiteboard and preferred configs.
- element [string] – contains a reference to the element in which whiteboard is
- configs [object] – options object
**uuid [string] required**
Room indentify.
```
uuid: "8c2ee602f11e4883a75a9be9dd51b4cd"
```
**roomToken [string] required**
Room auth token.
```
roomToken: "WHITEcGFydG5lcl9pZD....TOO...LONG"
```
**userId [string] required**
User indentify.
```
userId: "wdqzidmac"
```
**userName [string] optional**
User name.
```
userName: "rick"
```
**userAvatarUrl [string] optional**
User avatar url.
```
userAvatarUrl: "https://ohuuyffq2.qnssl.com/netless_icon.png"
```
**logoUrl [url] optional**
With the default value as undefined, Custom branding logo.
```
logoUrl: "https://path/to/logo.png"
```
**toolBarPosition [string] optional**
With the default value as top, ToolBar position, value include left,top,bottom,right.
```
toolBarPosition: "left"
```
**pagePreviewPosition [string] optional**
With the default value as right, Preview view position, value include left, right.
```
pagePreviewPosition: "left"
```
**boardBackgroundColor [color] optional**
With the default value as white, Background color.
```
boardBackgroundColor: "#F2F2F2"
```
**isReadOnly [boolean] optional**
With the default value as false, read-only meaning can not write at board.
```
isReadOnly: false
```
**identity [string] optional**
With the default value as host, value include host, guest, listener.
```
identity: “guest”
```
**defaultColorArray [string[]] optional**
```
defaultColorArray: [
"#EC3455",
"#005BF6",
"#F5AD46",
"#68AB5D",
"#9E51B6",
"#1E2023",
];
```
**roomCallback [(room: Room) => void] optional**
```
roomCallback: (room) => {
console.log(room);
}
```
**colorArrayStateCallback [(colorArray: string[]) => void] optional**
```
colorArrayStateCallback: (colorArray) => {
console.log(colorArray);
}
```
### WhiteBoard Player
To create a player, invoke a ```WhiteFastSDK.Player``` method in which you write the selected element in which you want to add the player and preferred configs.
- element [string] – contains a reference to the element in which whiteboard is
- configs [object] – options object
**uuid [string] required**
Room indentify.
```
uuid: "8c2ee602f11e4883a75a9be9dd51b4cd"
```
**roomToken [string] required**
Room auth token.
```
roomToken: "WHITEcGFydG5lcl9pZD....TOO...LONG"
```
**userId [string] required**
User indentify.
```
userId: "wdqzidmac"
```
**userName [string] optional**
User name.
```
userName: "rick"
```
**userAvatarUrl [string] optional**
User avatar url.
```
userAvatarUrl: "https://ohuuyffq2.qnssl.com/netless_icon.png"
```
**logoUrl [url] optional**
With the default value as undefined, Custom branding logo.
```
logoUrl: "https://path/to/logo.png"
```
**beginTimestamp [number] optional**
UTC time when the player starts playing
```
beginTimestamp: 1569290494106
```
**duration [number] optional**
How long the player plays
```
duration: 94106
```
**mediaUrl [url] optional**
Recorded media
```
mediaUrl: "https://path/to/media.m3u8"
```
**isChatOpen [boolean] optional**
```
isChatOpen: true
```
**boardBackgroundColor [color] optional**
With the default value as white, Background color.
```
boardBackgroundColor: "#F2F2F2"
```
**Callback [(player: Player) => void] optional**
```
playerCallback: (player) => {
console.log(player);
}
```
## 🚀 Development
1. Run `yarn dev` in your terminal
2. Live room by open facade/index.html
3. Player by open facade/player.html
## 👏 Contributing
Please refer to each project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.
1. Fork the repo on GitHub
2. Clone the project to your own machine
3. Commit changes to your own branch
4. Push your work back up to your fork
5. Submit a Pull request so that we can review your changes
NOTE: Be sure to merge the latest from "upstream" before making a pull request!
---
_Source: https://npm.io/package/white-fast-web-sdk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._