use-transport

A React hook with simple and responsible universal transports.

Motivation

use-transport is a React hook that provides a simple and responsible way to manage data transport. It is designed to be used with data-transport to provide a universal transport solution.

data-transport is a generic and responsible communication transporter:

iframe
Broadcast
Web Worker
Service Worker
Shared Worker
Browser Extension
Node.js
WebRTC
Electron
More transport port

Installation

npm install use-transport data-transport
# or
yarn add use-transport data-transport

Features

Simple and responsible
Support for multiple transport ports
Support for mock transport
Full TypeScript support

API

You can use the use-transport hook to create a transport instance. And then use the emit and listen methods to send and receive messages.

import React from 'react';
import { useTransport } from 'use-transport';

const App = () => {
  const transport = useTransport('IFrameMain', {});

  transport.listen(
    'hello',
    async () => {
      return 'world';
    },
    []
  );

  const handleClick = async () => {
    const response = await transport.emit('ping');
    console.log(response);
  };

  return <button onClick={handleClick}>Ping</button>;
};

Parameters

Parameter	Type	Description
`type`	enums	Transport port type
`options`	object	Transport port options

Returns

Return	Type	Description
`transport.emit`	(name: string \| options, ...args: any[]) => any	Emit a message
`transport.listen`	(name: string, fn: (...args: any[]) => any, deps?: any[]) => void	Listen for a message

The use-transport hook returns a transport instance. more API details can be found in the data-transport documentation.

If you want to use the use-transport hook with TypeScript, you need to use Transport type from use-transport.

type Interaction = {
  listen: {
    foo: (value: number) => Promise<number>;
  };
  emit: {
    bar: (value: number) => Promise<void>;
  };
};

const transport: Transport<Interaction> = useTransport('IFrameMain', {});

License

use-transport is MIT licensed.

unadlib/use-transport