### Run the example

Source: https://github.com/mooalot/zustorm/blob/main/tests/project/Readme.md

Starts the development server for the example project.

```bash
npm run dev
```

--------------------------------

### Install dependencies

Source: https://github.com/mooalot/zustorm/blob/main/tests/project/Readme.md

Installs the necessary packages for the project.

```bash
npm install
```

--------------------------------

### Run the Example

Source: https://github.com/mooalot/zustorm/blob/main/examples/arrays/README.md

Commands to install dependencies and run the array handling example.

```bash
cd examples/arrays
npm install
npm run dev
```

--------------------------------

### Quick Start

Source: https://github.com/mooalot/zustorm/blob/main/README.md

A basic example demonstrating how to set up and use Zustorm for form management with Zod validation.

```typescript
import { z } from 'zod';
import { create } from 'zustand';
import { withForm, getDefaultForm, FormController } from 'zustorm';

type UserForm = {
  name: string;
  email: string;
};

const useUserForm = create(
  withForm(() => getDefaultForm<UserForm>({ name: '', email: '' }), {
    getSchema: () =>
      z.object({
        name: z.string().min(1, 'Name required'),
        email: z.string().email('Invalid email'),
      }),
  })
);

function UserForm() {
  const isValid = useUserForm((state) => !state.errors);
  const isDirty = useUserForm((state) => state.dirty);

  return (
    <form>
      <FormController
        store={useUserForm}
        name="name"
        render={({ value, onChange, error }) => (
          <input value={value} onChange={(e) => onChange(e.target.value)} />
        )}
      />
      <FormController
        store={useUserForm}
        name="email"
        render={({ value, onChange, error }) => (
          <input value={value} onChange={(e) => onChange(e.target.value)} />
        )}
      />
      <button disabled={!isValid || !isDirty}>Submit</button>
    </form>
  );
}
```

--------------------------------

### Installation

Source: https://github.com/mooalot/zustorm/blob/main/README.md

Install Zustorm along with its peer dependencies: Zustand, Zod, and React.

```bash
npm install zustorm zustand zod react
```

--------------------------------

### Using Form Store Directly Example

Source: https://github.com/mooalot/zustorm/blob/main/README.md

Shows how to use the form store directly without `FormController` for granular control over rendering and state management, suitable for advanced scenarios.

```typescript
import { useFormStore } from 'zustorm';
import { useEffect } from 'react';
import { useStore } from 'zustand';

function UserForm() {
  const store = useFormStore();

  const name = useStore(store, (state) => state.values.name);
  const updateName = (newName: string) => {
    store.setState((state) => ({
      ...state,
      values: { ...state.values, name: newName },
    }));
  };

  return (
    <div>
      <input value={name} onChange={(e) => updateName(e.target.value)} />
      <button type="submit">Submit</button>
    </div>
  );
}
```

--------------------------------

### Using Form Provider

Source: https://github.com/mooalot/zustorm/blob/main/README.md

Example of using `FormStoreProvider` to provide the form store context to nested components.

```typescript
import { useMemo } from 'react';
import { FormStoreProvider, useFormStore, FormController } from 'zustorm';

function App() {
  ... 
  return (
    <FormStoreProvider store={store}>
      <UserForm />
    </FormStoreProvider>
  );
}

function UserForm() {
  const store = useFormStore();
  return (
    <FormController
      store={store}
      name="name"
      render={({ value, onChange }) => (
        <input value={value} onChange={(e) => onChange(e.target.value)} />
      )}
    />
  );
}
```

--------------------------------

### FormController Performance Optimization Example

Source: https://github.com/mooalot/zustorm/blob/main/README.md

Illustrates how to optimize performance with `FormController` by using `useStoreWithEqualityFn` via the `options` prop.

```typescript
<FormController
  ...
  options={{
    useStore: (api, selector) =>
      useStoreWithEqualityFn(api, selector, (a, b) => a === b),
  }}
/>
```

--------------------------------

### FormController ContextSelector Example

Source: https://github.com/mooalot/zustorm/blob/main/README.md

Demonstrates how to use the `contextSelector` prop of `FormController` to access specific form store values without causing re-renders for every field.

```typescript
<FormController
  store={store}
  name="email"
  contextSelector={(values) => values.name}
  render={({ value, onChange, error, context }) => (
    <input
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder={`Hello ${context}`}
    />
  )}
/>
```

--------------------------------

### Dynamic Arrays

Source: https://github.com/mooalot/zustorm/blob/main/README.md

Demonstrates how to handle dynamic arrays within a form using `FormController`.

```typescript
<FormController
  name="friends"
  render={({ value, onChange }) => (
    <div>
      {value.map((_, index) => (
        <FormController
          key={index}
          store={store}
          name={`friends.${index}.name`}
          render={({ value, onChange }) => (
            <input value={value} onChange={(e) => onChange(e.target.value)} />
          )}
        />
      ))}
      <button onClick={() => onChange([...value, { name: '' }])}>
        Add Friend
      </button>
    </div>
  )}
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.