# @dash4/client
> Dash4 webapp client application
Latest version **0.9.3** (published 2020-12-07) · MIT license · 0 weekly downloads
## Install
```sh
npm install @dash4/client
pnpm add @dash4/client
yarn add @dash4/client
bun add @dash4/client
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 0.9.3 |
| Published | 2020-12-07 |
| First published | 2019-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 3.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Simon Mollweide |
| Maintainers | smollweide |
## Links
- npm: https://www.npmjs.com/package/@dash4/client
- Repository: https://github.com/smollweide/dash4
- Homepage: https://github.com/smollweide/dash4#readme
- Issues: https://github.com/smollweide/dash4/issues
- npm.io page: https://npm.io/package/@dash4/client
## Dependencies (13)
- [react](https://npm.io/package/react.md) 16.13.1
- [tslib](https://npm.io/package/tslib.md) 2.0.3
- [jquery](https://npm.io/package/jquery.md) 3.5.1
- [core-js](https://npm.io/package/core-js.md) 3.8.1
- [@dash4/ui](https://npm.io/package/@dash4/ui.md) 0.9.3
- [bootstrap](https://npm.io/package/bootstrap.md) 4.5.3
- [react-dom](https://npm.io/package/react-dom.md) 16.13.1
- [@dash4/log](https://npm.io/package/@dash4/log.md) 0.9.3
- [@emotion/core](https://npm.io/package/@emotion/core.md) 10.0.35
- [react-bootstrap](https://npm.io/package/react-bootstrap.md) 1.4.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) 5.2.0
- [@dash4/react-xterm](https://npm.io/package/@dash4/react-xterm.md) 0.9.3
- [react-container-query](https://npm.io/package/react-container-query.md) 0.11.3
## Recent versions
- 0.9.3 (latest) — 2020-12-07
- 0.9.2 — 2020-11-18
- 0.9.1 — 2020-11-18
- 0.9.0 — 2020-08-22
- 0.8.5 — 2020-06-05
- 0.8.4 — 2020-05-09
- 0.8.3 — 2020-05-01
- 0.8.2 — 2020-04-09
- 0.8.1 — 2020-03-15
- 0.8.0 — 2020-01-24
- 0.7.1 — 2019-12-20
- 0.7.0 — 2019-11-15
- 0.6.0 — 2019-11-03
- 0.5.2 — 2019-10-24
- 0.5.1 — 2019-07-20
- … 6 more at https://npm.io/package/@dash4/client/versions
## README
Dash4 Client
Dash4 webapp client application
[](https://www.npmjs.com/package/@dash4/client)
[](http://opensource.org/licenses/MIT) [](http://commitizen.github.io/cz-cli/) [](https://github.com/prettier/prettier)
The following documentation is just relevant for dash4 plugin development. For informations on how to use Dash4 please read this: [Dash4 documentation](https://github.com/smollweide/dash4/blob/master/README.md)
## Table of Contents
* [Installation](#installation)
* [Utils](#utils)
* [registerPlugin](#util-register-plugin)
* [socket](#util-socket)
* [useEffectAsync](#util-use-effect-async)
* [Components](#components)
* [License](#license)
## Installation
```shell
npm i @dash4/client
```
## Utils
### registerPlugin
> register your Plugin to make it accessible for the Dash4 client application
```tsx
import React from 'react';
import { registerPlugin } from '@dash4/client/build/register-plugin';
export const Plugin = () => {
return (
Your Plugin
);
};
registerPlugin('PluginName', Plugin);
```
*arguments:*
```ts
name: string;
PluginComponent: JSX.Element;
```
### socket
> use (web) sockets to communicate with the Dash4 server application
* [Read here how to implement the socket on serverside](https://github.com/smollweide/dash4/blob/master/packages/server/README.md)
* add subscribe function
```tsx
async function subscribe(id: string, onChange: (data: string) => void) {
const socketData = await socket();
const on = (name: string, callback: (data: string) => void) => {
socketData.on(`plugin-name-${id}_${name}`, callback);
};
const send = (name: string, data?: string) => {
socketData.send(`plugin-name-${id}_${name}`, data);
};
send('connected');
on('data', (data: string) => {
onChange(data);
});
return send;
}
```
* add unsubscribe function
```tsx
async function unsubscribe(id: string) {
const socketData = await socket();
const off = (name: string) => {
socketData.off(`plugin-name-${id}_${name}`);
};
off('connected');
off('data');
}
```
* Usage example with react hooks (works of cause also with lifecycle methods)
```tsx
import React, { useState } from 'react';
import { useEffectAsync } from '@dash4/client/build/react-hooks';
export function useSocket(id: string) {
const [data, setData] = useState('');
const handleRecieveData = (_data: string) => setData(_data);
useEffectAsync(async () => {
await subscribe(id, handleRecieveData);
return () => unsubscribe(id);
}, []);
return data;
}
function YourPlugin({ id }: IProps) {
const data = useSocket(id);
return (
{data}
);
}
```
### useEffectAsync
> React hook for async version of useEffect
```tsx
import React, { useState } from 'react';
import { useEffectAsync } from '@dash4/client/build/react-hooks';
export function useSocket(id: string) {
const [data, setData] = useState('');
const handleRecieveData = (_data: string) => setData(_data);
useEffectAsync(async () => {
await subscribe(id, handleRecieveData);
return () => unsubscribe(id);
}, []);
return data;
}
```
## Components
[@dash4/ui](https://github.com/smollweide/dash4/blob/master/packages/ui/README.md)
### Xterm
[@dash4/react-xterm](https://github.com/smollweide/dash4/blob/master/packages/react-xterm/README.md)
## License
The @dash4/client is [MIT licensed](./LICENSE)
---
_Source: https://npm.io/package/@dash4/client · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._