Can you provide a simple example of using Unstated Next with TypeScript

Creating a State Container

First, create a state container using the `createContainer` function from Unstated Next:

typescript
import { createContainer } from 'unstated-next';

function useCounter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
}

const CounterContainer = createContainer(useCounter);

Using the State Container

Now, use the `CounterContainer` in your components:

typescript
function CounterDisplay() {
  const { count } = CounterContainer.useContainer();
  return <p>Count: {count}</p>;
}

function CounterControls() {
  const { increment, decrement } = CounterContainer.useContainer();
  return (
    <div>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  );
}

function App() {
  return (
    <CounterContainer.Provider>
      <CounterDisplay />
      <CounterControls />
    </CounterContainer.Provider>
  );
}

Explanation

1. State Container: The `useCounter` function defines the state and logic for a counter, and `createContainer` wraps it to create a reusable state container.

2. Using the State Container:
- Components: The `CounterDisplay` and `CounterControls` components use the `useContainer` method to access the state and actions from the `CounterContainer`.
- Provider: The `CounterContainer.Provider` wraps the app and provides the shared state to its children.

This way, the state is managed centrally in the `useCounter` function, and any component that needs access to the counter state or actions can simply use the `useContainer` method to get what it needs.

Benefits

- Type Safety: Using TypeScript ensures that the state and actions are properly typed, making it easier to maintain and debug the code.
- Reusability: The state container can be reused across multiple components, reducing code duplication.
- Easy Integration: Unstated Next integrates seamlessly with React Hooks and the Context API, making it easy to manage state in React applications[1][2][4].

Example Code

Here is the complete code example:

typescript
import { createContainer } from 'unstated-next';
import { useState } from 'react';

function useCounter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
}

const CounterContainer = createContainer(useCounter);

function CounterDisplay() {
  const { count } = CounterContainer.useContainer();
  return <p>Count: {count}</p>;
}

function CounterControls() {
  const { increment, decrement } = CounterContainer.useContainer();
  return (
    <div>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  );
}

function App() {
  return (
    <CounterContainer.Provider>
      <CounterDisplay />
      <CounterControls />
    </CounterContainer.Provider>
  );
}

export default App;

This example demonstrates how to use Unstated Next to manage state in a React application using TypeScript. It provides a reusable state container and allows components to access and update the state using React Hooks[1][2][4].