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

• SystemPropsMap

Type aliases

• RefHandle

Variables

• useIsomorphicLayoutEffect

Functions

• systemToComponent

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:

Name	Description
T	the 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:

Name	Type
SS	AnySystemSpec
M	SystemPropsMap<SS>
S	SR<SS>
R	-

Parameters:

Name	Type	Description
systemSpec	SS	The return value from a system call.
map	M	The streams to props / events / methods mapping Check SystemPropsMap for more details.
Root?	R	The optional React component to render. By default, the resulting component renders nothing, acting as a logical wrapper for its children.

Returns: object

Name	Type
Component	ForwardRefExoticComponent<PropsWithoutRef<CompProps> & RefAttributes<MethodsFromPropMap<SS, M>>>
useEmitter	useEmitter
useEmitterValue	useEmitterValue
usePublisher	usePublisher

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.

  ---