https://github.com/fredericoo/zustand-context

https://github.com/fredericoo/zustand-context

Last synced: about 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/fredericoo/zustand-context
• Owner: fredericoo
• Created: 2024-04-30T14:34:38.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-22T19:42:58.000Z (about 2 years ago)
• Last Synced: 2025-04-04T12:58:36.278Z (about 1 year ago)
• Language: TypeScript
• Size: 79.1 KB
• Stars: 42
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

          
# Zustand Context

Zustand context is a **super tiny (281 bytes gzipped)** and easy way to create a context-aware zustand store. With this you may determine an initial value for your store and use it in your components with isolated instances.

## Creating a Context-aware Zustand Store

```ts

type Cat = string

type CatStore = {

  cats: Cat[];

  addCat: (cat: Cat) => void;

  removeCat: (cat: Cat) => void;

}

export const [CatsProvider, useCatsStore] = createZustandContext(

	(initialState: { cats: Cat[] }) =>

		create(set => ({

			cats: initialState.cats,

			addCat: cat => set(state => ({ cats: [...state.cats, cat] })),

      removeCat: cat => set(state => ({ cats: state.cats.filter(c => c !== cat) })),

		})),

);

```

## Consuming a Context-aware Zustand Store

```tsx

const App = () => {

  return 

    

  

}

const CatsList = () => {

  /** Exact same api as zustand */

  const cats = useCatsStore(state => state.cats);

  return 


    {cats.map(cat => 
{cat}
)}

  

}

```


## Contributing

This project is open to contributions. Feel free to open an issue or a pull request.

## License

MIT