model-context

react context模块

Usage

import { ModelProvider, useModel} from 'model-context'
import { useState, useCallback } from 'react';

const CounterModel = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => setCount((c) => c + 1), []);
  const decrement = useCallback(() => setCount((c) => c - 1), []);

  return {
    count,
    increment,
    decrement,
  };
};

const ThemeModel = () => {
  const [theme, setTheme] = useState('light');
  return {
    theme,
    toggle: () => setTheme((t) => (t === 'light' ? 'dark' : 'light')),
  };
};

const Counter = () => {
  const { count, increment, decrement } = useModel('CounterModel');

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}> + </button>
      <button onClick={decrement}> - </button>
    </div>
  );
};

export default () => {
  return (
    <ModelProvider models={{
      CounterModel: CounterModel(),
      ThemeModel: ThemeModel(),
    }}>
      <Counter />
    </ModelProvider>
  )
}

LICENSE

MIT