@# @ruan-feiyang/react-context-state

A simple React Context state management utility that makes it easy to create and manage state in your React components using Context API.

Features

• Easy to use: Simple API for creating and managing state
• TypeScript support: Full TypeScript support for type safety
• Lightweight: No external dependencies, just uses React's built-in Context API
• Flexible: Works with any React project, big or small

Installation

npm install @ruan-feiyang/react-context-state

Usage

Basic Usage

import React from 'react';
import { createContextState } from '@ruan-feiyang/react-context-state';

// Define state type
interface CounterState {
  count: number;
}

// Define action type
type CounterAction =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'reset' };

// Create state management
const { Provider: CounterProvider, useContextState: useCounterState, useContextDispatch: useCounterDispatch } = createContextState<CounterState>((state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: 0 };
    default:
      return state;
  }
});

// Counter component
const Counter: React.FC = () => {
  const state = useCounterState();
  const dispatch = useCounterDispatch();

  return (
    <div>
      <h2>Counter: {state.count}</h2>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
};

// App component
const App: React.FC = () => {
  return (
    <CounterProvider initialState={{ count: 0 }}>
      <div>
        <h1>React Context State Example</h1>
        <Counter />
      </div>
    </CounterProvider>
  );
};

export default App;

Using in Multiple Components

// store.js
import { createContextState } from '@ruan-feiyang/react-context-state';

const { Provider: TestProvider, useContextState, useContextDispatch } = createContextState((state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
});

export { TestProvider, useContextState, useContextDispatch };

// TestComponent.jsx
import { useContextState, useContextDispatch } from './store';
import ChildComponent from './ChildComponent';

const TestComponent = () => {
  const state = useContextState();
  const dispatch = useContextDispatch();

  return (
    <div>
      <div>{state.count}</div>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      <ChildComponent />
    </div>
  );
};

export default TestComponent;

// ChildComponent.jsx
import { useContextState, useContextDispatch } from './store';

const ChildComponent = () => {
  const state = useContextState();
  const dispatch = useContextDispatch();

  return (
    <div>
      <div>Child Component: {state.count}</div>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment from Child</button>
    </div>
  );
};

// App.js
import { TestProvider } from './store';
import TestComponent from './TestComponent';

function App() {
  return (
    <TestProvider initialState={{ count: 0 }}>
      <TestComponent />
    </TestProvider>
  );
}

export default App;

API

createContextState<T>(reducer: (state: T, action: any) => T): CreateStateReturn<T>

Creates a state management system using React Context.

Parameters

• reducer: A function that takes the current state and an action, and returns the new state.

Returns

An object with the following properties:

• Provider: A React component that provides the state to its children.
• useContextState: A hook that returns the current state.
• useContextDispatch: A hook that returns the dispatch function for updating the state.

Provider Component

Props

• initialState: The initial state for the context.
• children: The child components that will have access to the state.

useContextState() Hook

Returns the current state from the context. Throws an error if used outside of a Provider.

useContextDispatch() Hook

Returns the dispatch function for updating the state. Throws an error if used outside of a Provider.

TypeScript Support

The library is fully typed with TypeScript. You can specify the type of your state when calling createContextState:

interface UserState {
  name: string;
  age: number;
}

type UserAction =
  | { type: 'setName'; payload: string }
  | { type: 'setAge'; payload: number };

const { Provider: UserProvider, useContextState: useUserState, useContextDispatch: useUserDispatch } = createContextState<UserState>((state, action) => {
  switch (action.type) {
    case 'setName':
      return { ...state, name: action.payload };
    case 'setAge':
      return { ...state, age: action.payload };
    default:
      return state;
  }
});

// Now useUserState() returns UserState
// useUserDispatch() returns React.Dispatch<any> (can be type-casted to React.Dispatch<UserAction>)

Testing

The library includes a test suite to ensure functionality. To run the tests:

npm test

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

ISC