Next.js Example

Craft your next amazing library using

koshaHarness the full potential of React 18 Server Components!

A tiny yet powerful store for modern react libraries.

Basic Example: Synced counters

All components below share the same state without any wrapper.

Counter Controller 1

Counter Display 1

Counter Controller 2

Counter Display 2

ShowHide Code

import { create } from "kosha";

interface CounterStore {
  count: number;
  setCount: (count: number) => void;
}

const useKosha = create<CounterStore>(set => ({
  count: 0,
  setCount: (count: number) => set(state => ({ ...state, count })),
}));

/** Counter Controller */
export const CounterController = () => {
  const { count, setCount } = useKosha();
  return <input type="number" value={count} onChange={e => setCount(Number(e.target.value))} />;
};

/** Counter Display  */
export const CounterDisplay = () => {
  const { count } = useKosha();
  return <div>{count}</div>;
};

Example with Selectors

Counter With Selectors

Rerender is triggered by RGS only when count changes.

Count: 0

Render Count: 1

Counter Without Selectors

Rerender is triggered every time the state changes.

Count: 0

Render Count: 1

UserData

renderCount = 1

Name: John

Age: 30

ShowHide Code

import { create } from "kosha";

interface MyKosha {
  count: number;
  name: string;
  user: {
    name: string;
    age: number;
  };
  setCount: (count: number) => void;
}

export const useMyKosha = create<MyKosha>(set => ({
  count: 0,
  name: "John",
  user: {
    name: "John",
    age: 30,
  },
  setCount: (count: number) => set(state => ({ ...state, count })),
}));

Featured packages built with this template.

Docs ->

Check out the official documentation for more information.

More Examples ->

Check out more examples on the official GitHub Repo. Feel free to suggest additional examples in the discussions section.

Star this repo ->

Star this repo for your new library! This also motivates us and helps us understand that community is interested in this work.