FM / nanostores

/opt/canhelp/node_modules/nanostores

Name	Size	Mode	Actions
atom/	-	0755	rm
clean-stores/	-	0755	rm
computed/	-	0755	rm
deep-map/	-	0755	rm
effect/	-	0755	rm
keep-mount/	-	0755	rm
lifecycle/	-	0755	rm
listen-keys/	-	0755	rm
map/	-	0755	rm
map-creator/	-	0755	rm
task/	-	0755	rm
warn/	-	0755	rm
index.d.ts	952	0644	edit dl rm
index.js	697	0644	edit dl rm
LICENSE	1095	0644	edit dl rm
package.json	725	0644	edit dl rm
README.md	1874	0644	edit dl rm

Edit: /opt/canhelp/node_modules/nanostores/README.md (1874B)

# 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 271 and 802 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.

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

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

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

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

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

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

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

---

<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" />  Made at <b><a href="https://evilmartians.com/devtools?utm_source=nanostores&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>.

---

[Size Limit]: https://github.com/ai/size-limit

## Docs
Read full docs **[here](https://github.com/nanostores/nanostores#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 271 and 802 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. ```ts // store/users.ts import { atom } from 'nanostores' export const $users = atom([]) export function addUser(user: User) { $users.set([...$users.get(), user]); } ``` ```ts // store/admins.ts import { computed } from 'nanostores' import { $users } from './users.ts' export const $admins = computed($users, users => users.filter(i => i.isAdmin)) ``` ```tsx // components/admins.tsx import { useStore } from '@nanostores/react' import { $admins } from '../stores/admins.ts' export const Admins = () => { const admins = useStore($admins) return (

)}

) } ``` ---

Made at Evil Martians, product consulting for developer tools. --- [Size Limit]: https://github.com/ai/size-limit ## Docs Read full docs **[here](https://github.com/nanostores/nanostores#readme)**.