Nano Stores

Nano Stores logo

Services & Skills

Share on

  • Small: Nano Stores is between 266 and 969 bytes (minified and gzipped). It has zero dependencies and uses Size Limit to control its 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: A chunk only contains 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, 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

In the same orbit

Explore more open source projects

How can we help you?

Martians at a glance
17
years in business

We transform growth-stage startups into unicorns, build developer tools, and create open source products.

If you prefer email, write to us at surrender@evilmartians.com