Nano Stores

Nano Stores logo

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

In the same orbit

Explore more OSS projects

Contact us

We’d love to hear from you! We’re not really all that evil, and we love discussing potential projects, intriguing ideas, and new opportunities. Complete the form below or drop us a line at surrender@evilmartians.com.

Martians at a glance
16
years in business

A product development consultancy that works with startups and established businesses, while also creating open source-based products and services