# @nanostores/preact

> Preact integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores

Latest version **1.1.0** (published 2026-03-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nanostores/preact
pnpm add @nanostores/preact
yarn add @nanostores/preact
bun add @nanostores/preact
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2026-03-17 |
| First published | 2021-10-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | ^20.0.0 \|\| >=22.0.0 |
| Dependencies | 0 |
| Unpacked size | 7.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 24 |
| Author | Andrey Sitnik |
| Maintainers | ai |
| Keywords | store, state, state manager, preact |

## Links

- npm: https://www.npmjs.com/package/@nanostores/preact
- Repository: https://github.com/nanostores/preact
- Homepage: https://github.com/nanostores/preact#readme
- Issues: https://github.com/nanostores/preact/issues
- Funding: https://github.com/sponsors/ai
- npm.io page: https://npm.io/package/@nanostores/preact

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2026-03-17
- 1.0.0 — 2025-04-10
- 0.5.2 — 2024-08-03
- 0.5.1 — 2024-02-20
- 0.5.0 — 2023-05-24
- 0.4.1 — 2023-04-20
- 0.4.0 — 2023-04-13
- 0.3.1 — 2022-09-22
- 0.3.0 — 2022-09-09
- 0.2.1 — 2022-08-01
- 0.2.0 — 2022-07-30
- 0.1.3 — 2021-12-04
- 0.1.2 — 2021-10-22
- 0.1.1 — 2021-10-22
- 0.1.0 — 2021-10-21

## README

# Nano Stores Preact

<img align="right" width="92" height="92" title="Nano Stores logo"
     src="https://nanostores.github.io/nanostores/logo.svg">

Preact integration for **[Nano Stores]**, a tiny state manager
with many atomic tree-shakable stores.

- **Small.** Less than 1 KB. Zero dependencies.
- **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.** 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.

```tsx
import { useStore } from '@nanostores/preact'

import { $profile } from '../stores/profile.js'

export const Header = () => {
  const profile = useStore($profile)
  return <header>{profile.name}</header>
}
```

[Nano Stores]: https://github.com/nanostores/nanostores/

---

<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-preact&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>.

---

## Options

### Keys

Use the `keys` option to re-render only on specific key changes:

```tsx
export const Header = () => {
  const profile = useStore($profile, { keys: 'name' })
  return <header>{profile.name}</header>
}
```

### SSR

SSR could be very complicated in VDom. To avoid hydration errors you
need exactly the same stores state in the end of server HTML rendering
and during the first DOM render on the client.

For simple solution you can disable any store update on the server
by `ssr: 'initial'`:

```tsx
export const Header = () => {
  const profile = useStore($profile, { ssr: 'initial' })

  // Server render and client hydration use store's initial value.
  // After hydration, client re-renders with the current value.
  return <header>{profile.name}</header>
}
```

For advanced cases where you update store values on the server before SSR, and
need pages to hydrate with the updated value from the server, set a function
that returns the server state: `ssr: () => serverState`.

```tsx
// Value of store on server at time of SSR, passed to client somehow...
const profileFromServer = { name: 'A User' }

export const Header = () => {
  const profile = useStore($profile, {
    // On server, always use up-to-date store value (set `ssr` to `false`).
    // On client, set server value to avoid error on hydration.
    ssr: typeof window === 'object' && (() => profileFromServer)
  })

  // Server render uses store's current value. Client uses value from function
  // for hydration, then after hydration re-renders with the current value.
  return <header>{profile.name}</header>
}
```

---
_Source: https://npm.io/package/@nanostores/preact · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._