open-index/open-npm huggingface dataset:
npm package: @scandinavia/ts-zustand
Description: A wrapper for `create` function from zustand with it's middlewares
Latest version: 0.1.3

# @scandinavia/ts-zustand

A wrapper for `create` function from zustand with it's middlewares

## Examples

### 1. createStore `(with persist)`:

```typescript
// store.ts

import { createStore } from '@scandinavia/ts-zustand';

const initialState = {
  foo: 'init',
};

export const useStore = createStore('unique name')(initialState, set => ({
  setFoo: (newFoo: string) => set(state => (state.foo = newFoo)),
}));

// component.tsx

import {useStore} form './store.ts'

export const Component: React.FC = () => {
  const [foo, setFoo] = useStore(state => [state.foo, state.setFoo]);
  const hundleChange = (val: string) => setFoo(val);

  return (
    <div>
      <input
        type='text'
        onChange={({ target: { value } }) => hundleChange(value)}
        value={foo}
      />
    </div>
  );
};
```

### 2. createStoreWithOutPersist `(without persist)`:

```typescript
// store.ts

import { createStoreWithOutPersist } from '@scandinavia/ts-zustand';

const initialState = {
  foo: 'init',
};

export const useStore = createStoreWithOutPersist('unique name')(
  initialState,
  set => ({
    setFoo: (newFoo: string) => set(state => (state.foo = newFoo)),
  })
);

// component.tsx

import {useStore} form './store.ts'

export const Component: React.FC = () => {
  const [foo, setFoo] = useStore(state => [state.foo, state.setFoo]);
  const hundleChange = (val: string) => setFoo(val);

  return (
    <div>
      <input
        type='text'
        onChange={({ target: { value } }) => hundleChange(value)}
        value={foo}
      />
    </div>
  );
};
```

### 3. createStore with types:

```typescript
// store.ts

import { createStore } from '@scandinavia/ts-zustand';
type StoreState = {
  foo?: string;
};

type StoreActions = {
  setFoo: (newFoo: string) => void;
};

const initialState: StoreState = {
  foo: 'init',
};

export const useStore = createStore('unique name')<StoreState, StoreActions>(
  initialState,
  set => ({
    setFoo: (newFoo: string) => set(state => (state.foo = newFoo)),
  })
);

// component.tsx

import {useStore} form './store.ts'

export const Component: React.FC = () => {
  const [foo, setFoo] = useStore(state => [state.foo, state.setFoo]);
  const hundleChange = (val: string) => setFoo(val);

  return (
    <div>
      <input
        type='text'
        onChange={({ target: { value } }) => hundleChange(value)}
        value={foo}
      />
    </div>
  );
};
```

## API

### 1. CreateStore `args:`

- unique name: `string`, a unique name to display in devtools and used as key in persist middleware **_(if used)_**
- config: the base zustand store config contain the following:
  1. initialState: `object`, the initial state of the Store.
  2. actions: `set=>actions`, to set the state value.