Nano Stores

Services & Skills

Share on

Small. Between 266 and 969 bytes (minified and gzipped). Zero dependencies. It uses Size Limit to control size.
Fast. With small atomic and derived stores, you don’t need to call the selector function for all components on every store change.
Tree Shakable. The chunk contains only stores used by components in the chunk.
Was designed to move logic from components to stores.
It has 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, list =>
  list.filter(user => user.isAdmin)
)

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

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

Author

Andrey Sitnik
Author of PostCSS and Autoprefixer, Principal Frontend Engineer

In the same orbit

Collaborative real-time security: Logux for Akeero
Collaborative real-time security: Logux for Akeero
June 23, 2022
Akeero
Akeero is an AWS architecture audit platform. Evil Martians created a professional UI, built the frontend, including a key feature—a visual collaborative real-time editor for architecture's design. The Martians helped the team to release an MVP in just 4 months.
$1.2M
total funding
Size Limit
Size Limit
Linter for your JavaScript application that makes the Web lighter by preventing JS library bloat.

Explore more OSS projects

SugarSS
SugarSS
An indent-based CSS syntax for PostCSS.
Print Snapshots
Print Snapshots
Print Jest snapshots to check the CLI output of your tool.

Nano Stores

Services & Skills

Share on

In the same orbit

Explore more OSS projects

Contact us