https://github.com/instawork/zustand-rhf-sync

Syncs zustand's store state with the form state in react-hook-forms
https://github.com/instawork/zustand-rhf-sync

javascript react react-hook-form zustand

Last synced: about 1 month ago
JSON representation

Syncs zustand's store state with the form state in react-hook-forms

• Host: GitHub
• URL: https://github.com/instawork/zustand-rhf-sync
• Owner: Instawork
• Created: 2023-10-24T04:10:00.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-09-06T09:13:23.000Z (3 months ago)
• Last Synced: 2024-10-09T18:17:13.683Z (about 1 month ago)
• Topics: javascript, react, react-hook-form, zustand
• Language: TypeScript
• Homepage:
• Size: 598 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
zustand-rhf-sync

---

Syncs zustand's store state with the form state in [react-hook-forms](react-hook-form.com). 

This allows form updates to immediately reflect in your store and allows the components that subscribe to your store to update based on form updates. 

Convenient if you want to use your store functions or selectors with form data.

## Install

```bash

npm install -save zustand-rhf-sync

```

Or with yarn 

```bash

yarn add zustand-rhf-sync

```

## Usage

```typescript

import { useFormWithStore } from "zustand-rhf-sync";

// use it just like useForm

// where default value is automatically populated from your store

const { register } = useFormWithStore(

    useBoundStore,

    (formData) => useBoundStore.setState({ form: formData }),

    (state) => state.formData,

    useFormOptions

)

```