React & Preact

Use @nanostores/react or @nanostores/preact package and useStore() hook to get store’s value and re-render component on store’s changes.

import { useStore } from '@nanostores/react' // or '@nanostores/preact'

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

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

In React useLoadingStore() suspends the component while the store is loading. It supports both loading formats: the state machine of @nanostores/async and the isLoading key of Logux Client and @nanostores/sql.

stores/user.ts

import { computedAsync } from '@nanostores/async'
import { atom } from 'nanostores'

export const $userId = atom('user-1')

export const $user = computedAsync($userId, userId => {
  return fetch(`/api/users/${userId}`).then(response => response.json())
})

---

Imported from the Nano Stores README for version 1.5.5. Improve this page there.