The Link React

React bindings for Core tunnels and synchronized properties. The package keeps the underlying Link objects authoritative and uses React only to subscribe and render their current values.

Install

npm install @the-link/react @the-link/core react

Tunnel events

ReactTunnel.useFactory() keeps one wrapper for a tunnel reference. Its hooks subscribe with React lifecycle cleanup.

import { ReactTunnel } from "@the-link/react"
import type { Tunnel } from "@the-link/core"

export function Status({ tunnel }: { tunnel: Tunnel }) {
    const events = ReactTunnel.useFactory(tunnel)
    const status = events.useFirstState("status:changed", "idle")

    return <span>{status}</span>
}

Use useState(event, initialTuple) when every event value is needed, or useSubscribe(event, handler) for an effect-style subscription. As with React hooks generally, call these methods unconditionally while rendering a component.

Properties

useProperty() reads a Core Property through useSyncExternalStore. The property remains the source of truth; React does not maintain a second copy.

import { useProperty } from "@the-link/react"
import type { Property } from "@the-link/core"

export function Theme({ property }: { property: Property<string> }) {
    const theme = useProperty(property)

    return <span>{theme}</span>
}

Entry points

| Import | Contract | | --- | --- | | @the-link/react | ReactTunnel and useProperty() |

React and @the-link/core are peer dependencies, so the application owns their instances.

Development

bun install --frozen-lockfile
bun run verify

License

MIT