Module: "react-urx/src/index"#

@virtuoso.dev/react-urx exports the systemToComponent function. It wraps urx systems in to UI logic provider components, mapping the system input and output streams to the component input / output points.

Simple System wrapped as React Component#

const sys = system(() => {
const foo = statefulStream(42)
return { foo }
})
const { Component: MyComponent, useEmitterValue } = systemToComponent(sys, {
required: { fooProp: 'foo' },
})
const Child = () => {
const foo = useEmitterValue('foo')
return <div>{foo}</div>
}
const App = () => {
return <Comp fooProp={42}><Child /><Comp>
}

Index#

Interfaces#

Type aliases#

Variables#

Functions#

Type aliases#

RefHandle#

Ƭ RefHandle<T>: T extends ForwardRefExoticComponent<RefAttributes<infer Handle>> ? Handle : never

Defined in react-urx/src/index.ts:167

Used to correctly specify type refs for system components

const s = system(() => { return { a: statefulStream(0) } })
const { Component } = systemToComponent(s)
const App = () => {
const ref = useRef<RefHandle<typeof Component>>()
return <Component ref={ref} />
}

Type parameters:#

NameDescription
Tthe type of the component

Variables#

useIsomorphicLayoutEffect#

Const useIsomorphicLayoutEffect: useLayoutEffect = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect

Defined in react-urx/src/index.ts:89

Functions#

systemToComponent#

systemToComponent<SS, M, S, R>(systemSpec: SS, map: M, Root?: R): object

Defined in react-urx/src/index.ts:182

Converts a system spec to React component by mapping the system streams to component properties, events and methods. Returns hooks for querying and modifying the system streams from the component's child components.

Type parameters:#

NameType
SSAnySystemSpec
MSystemPropsMap<SS>
SSR<SS>
R-

Parameters:#

NameTypeDescription
systemSpecSSThe return value from a system call.
mapMThe streams to props / events / methods mapping Check SystemPropsMap for more details.
Root?RThe optional React component to render. By default, the resulting component renders nothing, acting as a logical wrapper for its children.

Returns: object

NameType
ComponentForwardRefExoticComponent<PropsWithoutRef<CompProps> & RefAttributes<MethodsFromPropMap<SS, M>>>
useEmitteruseEmitter
useEmitterValueuseEmitterValue
usePublisherusePublisher

an object containing the following:

  • Component: the React component.
  • useEmitterValue: a hook that lets child components use values emitted from the specified output stream.
  • useEmitter: a hook that calls the provided callback whenever the specified stream emits a value.
  • usePublisher: a hook which lets child components publish values to the specified stream.