Reactive Components

component() with Reactive component definition

Takes a function accepting props type P (reactive props) which is deeply unboxed, returning a function that returns a ReactElement or null.

type ReactiveProps<P> = { [key in keyof P]: P[key] | Ref<P[key]> };

type ReactiveComponent<P> = 
  (props: UnwrapNestedRefs<ReactiveProps<P>>) => () => ReactElement<any, any> | null;

function component<Props>(componentSetup: ReactiveComponent<Props>)
: FC<ReactiveProps<Props>>;

Example

interface Props {
    id: string;
    data: string;
}

const MyComp = component((props: Props) => {
    return () => <div>{props.id} {props.data}</div>
})


const Container = component(() => {
    const myCompId: string = 1;
    const myCompData = ref('some data');
    return () => (
    // notice id and data are declared as strings 
    // but we can pass them as strings or a ref<string>
        <MyComp id={myCompId} data={myCompData}/>
    )
})

Lifecycles

onMounted()

Called when the component is mounted. Accepts a handler function which returns either void or a Disposer function. Disposer function is called when component is unmounted.

type Disposer = () => void;

onMounted(handler: () => (void | Disposer))

onUnmounted()

Called when the component is unmounted. Accepts a handler function that returns void

onUnmounted(handler: () => void);

Context API

consumeContext()

function consumeContext<T>(context: Context<T>): Ref<T>

component.withHandle()

Same as forwardRef. Ref prop will be passed to component alongside with props.

export type ReactiveComponentWithHandle<P, H> = 
  (props: UnwrapNestedRefs<ReactiveProps<P>>, ref: React.Ref<H>) => Renderer;
  
component.withHandle = 
  function <Props, Handle>(component: ReactiveComponentWithHandle<Props, Handle>)

imperativeHandle()

Used to define the content of the forwarded Ref. Similar to useImperativeHandle. Takes two parameters. First is the ref to populate second is the object to set the ref value.

const Input = component.withHandle((props, ref) => {

    // we can keep a reference to input element simple as this
    // React.createRef() can be used as well;
    let input;

    imperativeHandle({
        focus() {
            input.focus();
        }
    });

    return () => <input ref={r => input = r} />;
});

component() with functional component

A higher order component which accepts functional component and produces a component that reacts to reactive data.

function component<Props>(component: FC<UnwrapNestedRefs<ReactiveProps<Props>>>)
  : FC<ReactiveProps<Props>>;

ReactiveBoundary

Built-in component receiving a render function as children. Used to make some piece of rendered nodes reactive without extracting it as a component. It has an optional "data" property to be passed to the render function.

function ReactiveBoundaryComponent<T>(
  props: { data: T; children: (data: T) => RenderResult }
)