https://github.com/unadlib/use-transport
A React hook with simple and responsible universal transports
https://github.com/unadlib/use-transport
broadcast data-transport electron iframe react react-hooks service-worker shared-worker webrtc webworker
Last synced: about 2 months ago
JSON representation
A React hook with simple and responsible universal transports
- Host: GitHub
- URL: https://github.com/unadlib/use-transport
- Owner: unadlib
- License: mit
- Created: 2024-03-29T16:50:38.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-11T18:29:05.000Z (over 1 year ago)
- Last Synced: 2024-10-24T22:17:09.314Z (over 1 year ago)
- Topics: broadcast, data-transport, electron, iframe, react, react-hooks, service-worker, shared-worker, webrtc, webworker
- Language: TypeScript
- Homepage:
- Size: 220 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-transport
[](https://www.npmjs.com/package/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`](https://github.com/unadlib/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
```bash
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.
```jsx
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 Ping;
};
```
#### 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](https://github.com/unadlib/data-transport) documentation.
> If you want to use the `use-transport` hook with TypeScript, you need to use `Transport` type from `use-transport`.
```tsx
type Interaction = {
listen: {
foo: (value: number) => Promise;
};
emit: {
bar: (value: number) => Promise;
};
};
const transport: Transport = useTransport('IFrameMain', {});
```
## License
`use-transport` is [MIT licensed](https://github.com/unadlib/use-transport/blob/main/LICENSE).