Skip to content

mrsekut/jotai-sync

Repository files navigation

jotai-sync

[Japanese]

jotai-sync is a simple library for synchronizing two Jotai atoms. It ensures that changes in one atom are reflected in the other atom automatically.

Installation

$ npx jsr add @mrsekut/jotai-sync

Usage

Here is a basic example of how to use jotai-sync to synchronize two atoms: _valueAtom and _fieldAtom.

import { atom, useAtom } from 'jotai';
import { syncAtoms, ok, ng } from '@mrsekut/jotai-sync';

// Define the two atoms
const _valueAtom = atom<number>(0);
const _fieldAtom = atom<string>('');

// Create synchronized atoms
const [valueAtom, fieldAtom] = syncAtoms<number, string>(
  _valueAtom,
  _fieldAtom,

  // value → field
  v => ok(v.toString()),

  // field → value
  field => {
    const n = parseInt(field, 10);
    return isNaN(n) ? ng('Invalid number') : ok(n);
  },
);

When synchronizing two atoms (_valueAtom and _fieldAtom):

  • _valueAtom is used internally.
  • _fieldAtom is used for external interactions.

By passing these atoms to syncAtoms, new valueAtom and fieldAtom are returned. These new atoms are synchronized: updating one will automatically update the other. If you need to update only one without synchronizing, refer to the original atoms (_valueAtom or _fieldAtom).

Since we are synchronizing values with different structures, we need to provide conversion functions to transform the values both ways:

  • The third argument of syncAtoms converts value to field.
  • The fourth argument of syncAtoms converts field to value.

Each conversion function returns a Result type. Using the ok() and ng() utility functions simplifies this process.

Contributing

Welcome

LICENSE

MIT

About

synchronizing two Jotai atoms

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published