kyoka

Kyōka

Kyōka is a minimalistic state management library, created for React.

Kyōka aims to be barebone; it consists of only about 210 lines of code, while providing essential functions.

Installation

# npm
npm install kyoka
# Yarn
yarn add kyoka

Examples

• Counter

  import * as React from 'react';
  import * as ReactDOM from 'react-dom/client';
  import { ModelProvider, Observable, useModel, useObservable } from 'kyoka';
  
  class Model {
    count = new Observable(0);
  
    addCount() {
      this.count.set(this.count.get() + 1);
    }
  }
  
  function Counter() {
    const model = useModel<Model>();
    const value = useObservable(model.count);
  
    return (
      <>
        {value} <button onClick={model.addCount.bind(model)}>Add Count</button>
      </>
    );
  }
  
  const model = new Model();
  const root = ReactDOM.createRoot(document.getElementById('app')!);
  
  root.render(
    <ModelProvider model={model}>
      <Counter />
    </ModelProvider>
  );

• Todos

License

MIT