/open-observable

Primary LanguageTypeScript

OpenObservable

A hook library for subscriber data

Hooks

  • useObservable
  • useSubscriber
  • useSubscriberSelector
  • useSubscriberSelectorAsSubscriber
  • useSubscriberEffect
  • useGlobalObservable
  • useAnySubscriberChangeEffect

Components

  • GlobalObservable
  • Listen

Methods

  • createGlobalObservableKey
  • listen

Examples

const CountingExample: VFC = () => {
    const observable = useObservable(0);
    //Only rerender the listen block
    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
            <div>Current value is: {listen(observable.subscriber, (x) => x)}</div>
            <button onClick={() => observable.dispatch((old) => old + 1)}>Click</button>
        </div>
    );
};
const PassingToChildren: VFC = () => {
    const observable = useObservable('testing');

    return <Children _value={observable.subscriber} />;
};

type ChildrenProps = { _value: Subscriber<string> };
const Children: VFC<ChildrenProps> = ({ _value }) => {
    const value = useSubscriber(_value);

    return <div>{value}</div>;
};