CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-jotai

Primitive and flexible state management for React applications

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

core-atoms.mddocs/

Core Atoms

Core atom functionality providing the fundamental building blocks for state management in Jotai. Atoms are the basic units of state that can hold values, compute derived values, or perform actions.

Capabilities

Atom Creation Function

Creates atoms with different behaviors based on the arguments provided.

/**
 * Create a primitive atom with an initial value
 * @param initialValue - The initial value for the atom
 * @returns PrimitiveAtom that can be read and written
 */
function atom<Value>(initialValue: Value): PrimitiveAtom<Value>;

/**
 * Create a primitive atom without an initial value
 * @returns PrimitiveAtom with undefined initial value
 */
function atom<Value>(): PrimitiveAtom<Value | undefined>;

/**
 * Create a read-only derived atom
 * @param read - Function to compute the atom's value from other atoms
 * @returns Read-only Atom
 */
function atom<Value>(read: Read<Value>): Atom<Value>;

/**
 * Create a writable derived atom with custom read and write logic
 * @param read - Function to compute the atom's value from other atoms
 * @param write - Function to handle write operations
 * @returns WritableAtom with custom behavior
 */
function atom<Value, Args extends unknown[], Result>(
  read: Read<Value, SetAtom<Args, Result>>,
  write: Write<Args, Result>
): WritableAtom<Value, Args, Result>;

/**
 * Create a primitive atom with custom write behavior
 * @param initialValue - The initial value for the atom
 * @param write - Custom write function
 * @returns WritableAtom with custom write behavior
 */
function atom<Value, Args extends unknown[], Result>(
  initialValue: Value,
  write: Write<Args, Result>
): WritableAtom<Value, Args, Result>;

Usage Examples:

import { atom } from "jotai";

// Primitive atom
const countAtom = atom(0);

// Derived read-only atom
const doubleCountAtom = atom((get) => get(countAtom) * 2);

// Write-only atom (action)
const incrementAtom = atom(null, (get, set) => {
  set(countAtom, get(countAtom) + 1);
});

// Writable derived atom
const uppercaseAtom = atom(
  (get) => get(textAtom).toUpperCase(),
  (get, set, newText: string) => {
    set(textAtom, newText.toLowerCase());
  }
);

// Async atom
const userAtom = atom(async () => {
  const response = await fetch("/api/user");
  return response.json();
});

Core Interfaces and Types

Atom Interface

Base interface for all atoms.

interface Atom<Value> {
  /** Returns a string representation of the atom */
  toString: () => string;
  /** Function to read the atom's value */
  read: Read<Value>;
  /** Optional function to compare atoms for equality */
  unstable_is?(atom: Atom<unknown>): boolean;
  /** Optional debug label for development */
  debugLabel?: string;
  /** Internal flag for marking atoms as private */
  debugPrivate?: boolean;
  /** Optional initialization callback when atom is first referenced */
  unstable_onInit?(store: Store): void;
}

WritableAtom Interface

Interface for atoms that can be written to.

interface WritableAtom<Value, Args extends unknown[], Result> extends Atom<Value> {
  /** Function to read the atom's value with setSelf capability */
  read: Read<Value, SetAtom<Args, Result>>;
  /** Function to handle write operations */
  write: Write<Args, Result>;
  /** Optional mount callback for side effects */
  onMount?: OnMount<Args, Result>;
}

PrimitiveAtom Type

Type alias for simple readable and writable atoms.

type PrimitiveAtom<Value> = WritableAtom<Value, [SetStateAction<Value>], void>;

Function Types

Read Function Type

Function type for reading atom values.

type Read<Value, SetSelf = never> = (
  get: Getter,
  options: { 
    readonly signal: AbortSignal; 
    readonly setSelf: SetSelf 
  }
) => Value;

Write Function Type

Function type for writing to atoms.

type Write<Args extends unknown[], Result> = (
  get: Getter,
  set: Setter,
  ...args: Args
) => Result;

OnMount Function Type

Function type for mount callbacks.

type OnMount<Args extends unknown[], Result> = <S extends SetAtom<Args, Result>>(
  setAtom: S
) => OnUnmount | void;

type OnUnmount = () => void;

SetAtom Type

Type for atom setter functions.

type SetAtom<Args extends unknown[], Result> = <A extends Args>(
  ...args: A
) => Result;

Utility Types

Getter and Setter Types

Core function types for atom operations.

type Getter = <Value>(atom: Atom<Value>) => Value;

type Setter = <Value, Args extends unknown[], Result>(
  atom: WritableAtom<Value, Args, Result>,
  ...args: Args
) => Result;

SetStateAction Type

Type for state update actions, supporting both direct values and updater functions.

type SetStateAction<Value> = Value | ((prev: Value) => Value);

Store Interface

Interface for atom stores that manage atom values and subscriptions.

interface Store {
  /** Get the current value of an atom */
  get: <Value>(atom: Atom<Value>) => Value;
  /** Set the value of a writable atom */
  set: <Value, Args extends unknown[], Result>(
    atom: WritableAtom<Value, Args, Result>,
    ...args: Args
  ) => Result;
  /** Subscribe to atom changes */
  sub: (atom: AnyAtom, listener: Listener) => Unsubscribe;
}

type AnyAtom = Atom<unknown>;
type Listener = () => void;
type Unsubscribe = () => void;

Store Management

Store Creation

Functions for creating and managing atom stores.

/**
 * Create a new isolated atom store
 * @returns New Store instance
 */
function createStore(): Store;

/**
 * Get the default global store, creating one if it doesn't exist
 * @returns The default Store instance
 */
function getDefaultStore(): Store;

/**
 * Internal function to override the default store creation behavior
 * @param fn - Function that returns a new createStore function
 */
function INTERNAL_overrideCreateStore(
  fn: (prev: typeof createStore | undefined) => typeof createStore
): void;

Usage Examples:

import { createStore, getDefaultStore } from "jotai";

// Create a custom store
const myStore = createStore();

// Get the default store
const defaultStore = getDefaultStore();

// Use custom store
const value = myStore.get(countAtom);
myStore.set(countAtom, 10);

Type Extraction Utilities

Utility types for extracting information from atom types.

/**
 * Extract the value type from an atom type
 */
type ExtractAtomValue<AtomType> = AtomType extends Atom<infer Value> ? Value : never;

/**
 * Extract the argument types from a writable atom type
 */
type ExtractAtomArgs<AtomType> = AtomType extends WritableAtom<any, infer Args, any> ? Args : never;

/**
 * Extract the result type from a writable atom type
 */
type ExtractAtomResult<AtomType> = AtomType extends WritableAtom<any, any, infer Result> ? Result : never;

Usage Examples:

import type { ExtractAtomValue, ExtractAtomArgs } from "jotai";

const numberAtom = atom(42);
const incrementAtom = atom(null, (get, set, amount: number) => {
  set(numberAtom, get(numberAtom) + amount);
});

// Extract types from atoms
type NumberValue = ExtractAtomValue<typeof numberAtom>; // number
type IncrementArgs = ExtractAtomArgs<typeof incrementAtom>; // [number]

docs

core-atoms.md

index.md

react-integration.md

react-utilities.md

vanilla-utilities.md

tile.json