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
• Utils
  • registerPlugin
  • socket
  • useEffectAsync
• Components
• License

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

• Read here how to implement the socket on serverside

• add subscribe function

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