Jotai-Loadable#

Turn an async Jotai atom into a loadable atom with loading, hasData, and hasError states.

tl;dr#

• Install by executing npm install jotai jotai-loadable or yarn add jotai jotai-loadable.
• Import by adding import { loadable } from 'jotai-loadable'.
• Use it by writing const loadableAtom = loadable(asyncAtom).

Examples#

import { atom } from 'jotai';
import { loadable } from 'jotai-loadable';

const asyncAtom = atom(async () => {
  const response = await fetch('/api/user');
  return response.json() as Promise<{ name: string }>;
});

const loadableAtom = loadable(asyncAtom);

// {
//   state: 'loading'
// }
//
// {
//   state: 'hasData',
//   data: { name: 'Wojciech' }
// }
//
// {
//   state: 'hasError',
//   error: Error
// }

License#

The MIT License.

Author#

Wojciech Maj