use-local-store ·

Pure React useLocalStore hook implementation fully written using Typescript.

Inspired by mobx-react useLocalStore and uses similar API.

Typescript friendly.

Installation

npm

npm install use-local-store --save

yarn

yarn add use-local-store

Usage

NOTE! use-local-store ships with ES6 sources. If you need ES5 support, transpile sources yourself.

import { useLocalStore, transaction } from 'use-local-store';

const Counter = () => {
  const store = useLocalStore(() => ({
    count: 0,
    increment: transaction(function () {
      this.count++;
    }),
    decrement: transaction(function () {
      this.count--;
    }),
  }));

  return (
    <div>
      Count: {store.count}
      <button onClick={store.increment}>Increment</button>
      <button onClick={store.decrement}>Decrement</button>
    </div>
  );
};

Concepts

You must wrap every store state changing method by transaction. It needed to notify React, that store state was updated and time to trigger updates.

Recommendations

Don't shame to use transaction to group several methods calls as one transaction. It'll save from multiple updates.

For instance:

const store = useLocalStore((source) => ({
  count: source.initialCount,
  tick: 0,
  increment: transaction(function () {
    this.count++;
  }),
  resetCount: transaction(function () {
    this.count = source.initialCount;
  }),
  resetTick: transaction(function () {
    this.tick = 0;
  }),
  reset: transaction(function () {
    // store.reset() will cause one update, not two
    this.resetCount();
    this.resetTick();
  }),
}));

Examples

Store with props interop

You must pass props as second argument to useLocalStore.

NOTE! Don't use props directly in store. It must cause errors.

import { useLocalStore, transaction } from 'use-local-store';

const Counter = (props) => {
  const store = useLocalStore(
    (source) => ({
      count: 0,
      get multipliedCount() {
        return this.count * source.multiplier;
      },
      increment: transaction(function () {
        this.count++;
      }),
      decrement: transaction(function () {
        this.count--;
      }),
    }),
    props
  );

  return (
    <div>
      Count: {store.count}
      Multiplied count: {store.multipliedCount}
      <button onClick={store.increment}>Increment</button>
      <button onClick={store.decrement}>Decrement</button>
    </div>
  );
};

Store with store interop

import { useLocalStore, transaction } from 'use-local-store';

const Counter = (props) => {
  const store = useLocalStore(() => ({
    count: 0,
  }));
  const anotherStore = useLocalStore(() => ({
    get multipliedCount() {
      return store.count * 5;
    },
  }));

  return (
    <div>
      Count: {store.count}
      Multiplied count: {anotherStore.multipliedCount}
      <button onClick={store.increment}>Increment</button>
      <button onClick={store.decrement}>Decrement</button>
    </div>
  );
};

License

MIT