@dash4/client

0.9.3 • Public • Published

Dash4 Client

Dash4 webapp client application

NPM version License Commitizen friendly Prettier


The following documentation is just relevant for dash4 plugin development. For informations on how to use Dash4 please read this: Dash4 documentation

Table of Contents

Installation

npm i @dash4/client

Utils

registerPlugin

register your Plugin to make it accessible for the Dash4 client application

import React from 'react';
import { registerPlugin } from '@dash4/client/build/register-plugin';

export const Plugin = () => {
  return (
    <div>Your Plugin</div>
  );
};

registerPlugin('PluginName', Plugin);

arguments:

name: string;
PluginComponent: JSX.Element;

socket

use (web) sockets to communicate with the Dash4 server application

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
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)
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 (
    <div>{data}</div>
  );
}

useEffectAsync

React hook for async version of useEffect

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

Xterm

@dash4/react-xterm

License

The @dash4/client is MIT licensed

Readme

Keywords

none

Package Sidebar

Install

npm i @dash4/client

Weekly Downloads

44

Version

0.9.3

License

MIT

Unpacked Size

3.25 MB

Total Files

125

Last publish

Collaborators

  • smollweide