React device portal

See Storybook example here.

Install

npm install react-device-portal

How to use

It is expected that the package will be used on two different devices. Create for them two separate pages or apps. Let's call them App A and App B. Both apps will be linked by same room (e.g. 'my-test-room').

App A

The first app will be a value provider or Input.

const AppA = () => {
	const [value, setValue] = useState(0)
	useDevicePortalInput('my-test-room', value.toString())

	return (
		<>
			<h1>App A</h1>
			<p>Value: {value}</p>
			<button
				onClick={() => {
					setValue(value + 1)
				}}
			>
				Increment
			</button>
		</>
	)
}

App B

The other app will be a value consumer or Output. Every time input value in App A changes, the output in App B will be automatically updated.

const AppB = () => {
	const { value } = useDevicePortalOutput('my-test-room')

	return (
		<>
			<h1>App B</h1>
			<p>Value: {value}</p>
		</>
	)
}

Server used for WebRTC signaling

github.com/FilipChalupa/webrtc-signaling-server

Development

Run

npm ci
npm run dev

and

npm run storybook