https://github.com/zustandjs/zustand-xs

XState/store compabile middleware for Zustand
https://github.com/zustandjs/zustand-xs

Last synced: about 1 year ago
JSON representation

XState/store compabile middleware for Zustand

• Host: GitHub
• URL: https://github.com/zustandjs/zustand-xs
• Owner: zustandjs
• License: mit
• Created: 2024-08-02T04:20:21.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-02-25T00:33:03.000Z (over 1 year ago)
• Last Synced: 2025-03-23T08:46:39.318Z (over 1 year ago)
• Language: TypeScript
• Size: 84 KB
• Stars: 63
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# zustand-xs

[![CI](https://img.shields.io/github/actions/workflow/status/zustandjs/zustand-xs/ci.yml?branch=main)](https://github.com/zustandjs/zustand-xs/actions?query=workflow%3ACI)

[![npm](https://img.shields.io/npm/v/zustand-xs)](https://www.npmjs.com/package/zustand-xs)

[![size](https://img.shields.io/bundlephobia/minzip/zustand-xs)](https://bundlephobia.com/result?p=zustand-xs)

[![discord](https://img.shields.io/discord/627656437971288081)](https://discord.gg/MrQdmzd)

XState/store compabile middleware for Zustand

## Motivation

Just for fun.

Inspired by https://tkdodo.eu/blog/introducing-x-state-store.

## Install

```bash

npm install zustand zustand-xs

```

## Usage

```tsx

import { create } from 'zustand';

import { xs } from 'zustand-xs';

const useCountStore = create(

  xs(

    {

      count: 0,

      text: 'hello',

    },

    {

      inc: {

        count: (context) => context.count + 1,

      },

      updateText: (_context, event: { text: string }) => ({

        text: event.text,

      }),

      reset: { count: 0, text: 'hello' },

    },

  ),

);

const Counter = () => {

  const count = useCountStore((state) => state.count);

  const text = useCountStore((state) => state.text);

  const inc = () => useCountStore.send({ type: 'inc' });

  const updateText = (text: string) =>

    useCountStore.send({ type: 'updateText', text });

  const reset = () => useCountStore.send({ type: 'reset' });

  return (

    <>

      


        Count: {count}

        

          +1

        

      

      


         updateText(e.target.value)} />

      

      


        

          Reset

        

      

    >

  );

};

```


## Examples

The [examples](examples) folder contains working examples.

You can run one of them with

```bash

PORT=8080 pnpm run examples:01_counter

```

and open  in your web browser.

You can also try them directly:

[01](https://stackblitz.com/github/zustandjs/zustand-xs/tree/main/examples/01_counter)

## Tweets

- https://x.com/dai_shi/status/1819232740749070438