use-stores

A simple utility to generate React hooks from observables like Svelte stores.

Features

• 🪝 Convert Svelte-like stores to React hooks
• 📦 Zero dependencies (only peer dependency on React)
• 🔄 Full TypeScript support
• ⚡ Automatic subscription management
• 🛡️ Optional immutability handling for mutable store values

Installation

npm install use-stores
# or
pnpm add use-stores
# or
yarn add use-stores

Usage

Basic Setup

First, create your store hooks by passing React's hooks to useStores:

import {useState, useEffect} from 'react';
import {useStores} from 'use-stores';

const {useReadable, useWriteable} = useStores({useState, useEffect});

Using with Readable Stores

import {readable} from 'svelte/store';

// Create a readable store
const count = readable(0, (set) => {
  const interval = setInterval(() => set(n => n + 1), 1000);
  return () => clearInterval(interval);
});

// Use it in a React component
function Counter() {
  const value = useReadable(count);
  return <div>Count: {value}</div>;
}

Using with Writable Stores

import {writable} from 'svelte/store';

// Create a writable store
const text = writable('Hello, world!');

// Use it in a React component
function TextInput() {
  const [value, setValue] = useWriteable(text);
  
  return (
    <input 
      type="text" 
      value={value} 
      onChange={(e) => setValue(e.target.value)} 
    />
  );
}

Mutable Store Values

By default, use-stores assumes store values are immutable. If your store contains mutable values that you want React to detect changes for, pass false as the second argument:

const mutableStore = writable({items: []});

function TodoList() {
  // With immutable=false, changes to the array/object will trigger re-renders
  const [value] = useWriteable(mutableStore, false);
  
  return (
    <ul>
      {value.items.map((item, i) => (
        <li key={i}>{item}</li>
      ))}
    </ul>
  );
}

API

useStores(reactHooks)

Creates React hooks for working with Svelte-like stores.

Parameters:

• reactHooks: Object containing useState and useEffect from React

Returns:

• useReadable<T>(store, immutable?): Hook for readable stores
• useWriteable<T>(store, immutable?): Hook for writable stores

useReadable<T>(store, immutable?)

Subscribe to a readable store and get its current value.

Parameters:

• store: A Readable<T> store with a subscribe method
• immutable: (optional) Whether the store value is immutable. Defaults to true

Returns:

• The current value of the store (T)

useWriteable<T>(store, immutable?)

Subscribe to a writable store and get its value, setter, and updater.

Parameters:

• store: A Writable<T> store with subscribe, set, and update methods
• immutable: (optional) Whether the store value is immutable. Defaults to true

Returns:

• [value, setter, updater] tuple where:
  • value: The current value of the store (T)
  • setter: Function to set a new value ((v: T) => void)
  • updater: Function to update the value ((u: (v: T) => T) => void)

Type Definitions

The library includes TypeScript definitions for both React and Svelte store types:

// Store types
interface Readable<T> {
  subscribe(run: (value: T) => void): () => void;
}

interface Writable<T> extends Readable<T> {
  set(value: T): void;
  update(updater: (value: T) => T): void;
}

License

MIT