Neurotic and Probably Misinformed
    Wondering what’s next for npm?Check out our public roadmap! »

    dipole-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    dipole-react

    React bindings for dipole observable library.

    The bindings require React from version 16.8.0, when hooks were introduced. Hooks binding implementation is automatically used for functional components, though class-based components are supported too.

    Usage

    In oreder to make component rerender on observable/computed value change, you need to wrap it into observer funciton. Alternatively, you can use useObservable hook to achieve the same behaviour without wrapping the component.

    Example

    Open in codesandbox

    import React from "react";
    import ReactDOM from "react-dom";
    import { action, observable, makeObservable } from "dipole";
    import { observer } from "dipole-react";
    
    class CounterModel {
      count = observable.prop(0);
    
      constructor() {
        makeObservable(this);
      }
    
      inc = action(() => (this.count += 1));
      dec = action(() => (this.count -= 1));
      reset = action(() => (this.count = 0));
    }
    
    const Counter = observer(({ model }) => {
      return (
        <div>
          Counter is: {model.count}
          <button onClick={model.inc}>+</button>
          <button onClick={model.dec}>-</button>
          <button onClick={model.reset}>Reset</button>
        </div>
      );
    });
    
    const counterModel = new CounterModel();
    
    ReactDOM.render(<Counter model={counterModel} />, document.getElementById("root"));

    Example with useObservable:

    const Counter = ({ model }) => {
      const count = useObservable(() => model.count);
      return (
        <div>
          Counter is: {count}
          <button onClick={model.inc}>+</button>
          <button onClick={model.dec}>-</button>
          <button onClick={model.reset}>Reset</button>
        </div>
      );
    };

    API

    observer(component)

    Creates reactive version of React component that subscribes to observable/computed values accessed in render function/method and re-renders on their changes.

    For functional components hooks-based implementation is used.

    For class components, class-based implementation is used.

    Note: in order to see component names in React devtools, be sure to pass named component to observer or set displayName on the resulting reactive component.

    useObservable(getter)

    Subscribes component to all observable/computed values accessed in getter function and return its execution result. Typical usage:

    const [a, b, c] = useObservable(() => [model.a, model.b, model.c]);

    License

    MIT

    Author

    Eugene Daragan

    Install

    npm i dipole-react

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    23.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar