@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

    Keywords

    none

    Install

    npm i @dash4/client

    DownloadsWeekly Downloads

    118

    Version

    0.9.3

    License

    MIT

    Unpacked Size

    3.25 MB

    Total Files

    125

    Last publish

    Collaborators

    • smollweide