nanostores

What is nanostores?

Nanostores is a tiny state manager for React, Preact, Vue, Svelte, and vanilla JavaScript. It is designed to be small, fast, and efficient, making it suitable for both small and large applications. Nanostores provides a simple API for creating and managing reactive stores.

What are nanostores's main functionalities?

Creating a Store

Nanostores allows you to create a simple store using the `atom` function. This store can hold any type of data, and you can initialize it with a default value. In this example, a counter store is created with an initial value of 0.

import { atom } from 'nanostores';

const counter = atom(0);

Subscribing to a Store

You can subscribe to changes in a store using the `subscribe` method. This allows you to react to changes in the store's value. In this example, a subscription is set up to log the counter's value whenever it changes.

import { atom } from 'nanostores';

const counter = atom(0);

counter.subscribe(value => {
  console.log('Counter value:', value);
});

Updating a Store

Nanostores provides a `set` method to update the value of a store. You can also use the `get` method to retrieve the current value of the store. In this example, the counter's value is incremented by 1.

import { atom } from 'nanostores';

const counter = atom(0);

counter.set(counter.get() + 1);

Other packages similar to nanostores

zustand

Zustand is a small, fast, and scalable state management solution for React. Like Nanostores, it provides a simple API for creating and managing state. However, Zustand is specifically designed for React, whereas Nanostores supports multiple frameworks including React, Vue, and Svelte.

valtio

Valtio is a proxy-based state management library for React. It allows you to create reactive state objects that automatically update components when the state changes. Valtio is similar to Nanostores in its simplicity and reactivity, but it is more focused on React and uses proxies for state management.

jotai

Jotai is a primitive and flexible state management library for React. It provides atoms as a way to manage state, similar to Nanostores. Jotai is designed to be minimal and composable, focusing on React applications, while Nanostores offers broader framework support.

README

Nano Stores

A tiny state manager for React, React Native, Preact, Vue, Svelte, Solid, Lit, Angular, and vanilla JS. It uses many atomic stores and direct manipulation.

• Small. Between 265 and 814 bytes (minified and brotlied). Zero dependencies. It uses Size Limit to control size.
• Fast. With small atomic and derived stores, you do not need to call the selector function for all components on every store change.
• Tree Shakable. A chunk contains only stores used by components in the chunk.
• Designed to move logic from components to stores.
• Good TypeScript support.

// store/users.ts
import { atom } from 'nanostores'

export const $users = atom<User[]>([])

export function addUser(user: User) {
  $users.set([...$users.get(), user]);
}

// store/admins.ts
import { computed } from 'nanostores'
import { $users } from './users.js'

export const $admins = computed($users, users => users.filter(i => i.isAdmin))

// components/admins.tsx
import { useStore } from '@nanostores/react'
import { $admins } from '../stores/admins.js'

export const Admins = () => {
  const admins = useStore($admins)
  return (
    <ul>
      {admins.map(user => <UserItem user={user} />)}
    </ul>
  )
}

---

  Made at Evil Martians, product consulting for developer tools.

---

Docs

Read full docs here.

Changelog

0.11.0

• Mutate only change paths in deepMap() (by @russelldavis).
• Moved Store#notify() back to public API (by @gismya).
• Added subscribeKeys() (by @gismya).
• Added setByKey() export (by @yhdgms1).
• Fixed queued listeners after they are unsubscribed (by @gismya).
• Fixed stale computed values (by @russelldavis).
• Improved computed() performance (by @russelldavis).
• Reduced size (by @Minhir).
• Improved types (by @psd-coder).