@applicaster/zapp-react-native-utils/reactHooks/state/README.md

Applicaster Zapp React Native utilities package

# ZStoreProvider and useZStore

This module provides a React context-based solution for managing Zustand stores with named access.

## Usage

### ZStoreProvider

The `ZStoreProvider` component creates a Zustand store from the provided value and makes it available to child components.

```tsx
import { ZStoreProvider } from "@applicaster/zapp-react-native-utils/reactHooks/state";

// In your component
<ZStoreProvider name="playerConfiguration" value={controller?.config}>
  <YourComponent />
</ZStoreProvider>
```

### useZStore

The `useZStore` hook allows you to access a Zustand store by name from within a `ZStoreProvider`.

```tsx
import { useZStore } from "@applicaster/zapp-react-native-utils/reactHooks/state";
import { useStore } from "zustand";

// In your component
const MyComponent = () => {
  const store = useZStore("playerConfiguration");
  const config = useStore(store, (state) => state.someProperty);
  
  return <Text>{config}</Text>;
};
```

## Example

```tsx
import React from "react";
import { ZStoreProvider, useZStore } from "@applicaster/zapp-react-native-utils/reactHooks/state";
import { useStore } from "zustand";

// Component that uses the store
const PlayerConfigDisplay = () => {
  const store = useZStore("playerConfiguration");
  const config = useStore(store, (state) => state);
  
  return (
    <View>
      <Text>Player Config: {JSON.stringify(config)}</Text>
    </View>
  );
};

// Main component that provides the store
const PlayerComponent = ({ controller }) => {
  return (
    <ZStoreProvider name="playerConfiguration" value={controller?.config}>
      <PlayerConfigDisplay />
    </ZStoreProvider>
  );
};
```

## Features

- **Named Stores**: Access stores by name instead of importing them directly
- **Context-based**: Uses React Context for store management
- **Zustand Integration**: Seamlessly works with existing Zustand stores
- **Type Safety**: Full TypeScript support
- **Error Handling**: Clear error messages when stores are not found or used outside providers

## Error Handling

The `useZStore` hook will throw errors in the following cases:

1. **Used outside provider**: "useZStore must be used within a ZStoreProvider"
2. **Store not found**: "Store with name 'storeName' not found. Make sure it's provided by a ZStoreProvider"