https://github.com/codebayu/use-hydration-zustand

React hook for handle the persist state of zustand
https://github.com/codebayu/use-hydration-zustand

hydration zustand zustand-persist

Last synced: 22 days ago
JSON representation

React hook for handle the persist state of zustand

• Host: GitHub
• URL: https://github.com/codebayu/use-hydration-zustand
• Owner: codebayu
• License: mit
• Created: 2023-12-02T13:20:44.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-31T17:06:44.000Z (9 months ago)
• Last Synced: 2024-12-17T08:26:08.936Z (23 days ago)
• Topics: hydration, zustand, zustand-persist
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@codebayu/use-hydration-zustand
• Size: 18.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# @codebayu/use-hydration-zustand

A React Custom Hook for Zustand state management library to simplify hydration handling.

## Installation

```bash

# npm

npm install @codebayu/use-hydration-zustand

# yarn

yarn add @codebayu/use-hydration-zustand

```

## Usage

```tsx

import { useHydrationZustand } from '@codebayu/use-hydration-zustand';

import create from 'zustand';

// Your Zustand store

const useStore = create((set) => ({

  // Your store definition here

}));

function MyComponent() {

  // Use the useHydrationZustand hook

  const isHydrated = useHydrationZustand(useStore);

  return (

    


      {isHydrated ? (

        items.map((item) => )

      ) : (

        

      )}

    

  );

}


export default MyComponent;

```

## API

`useHydrationZustand(store)`

A hook for Zustand that simplifies hydration handling.

Parameters

- `store (UseBoundStore)`: The Zustand store.

Returns

- `boolean`: true if the store has finished hydration, false otherwise.

## License

This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.