Next.js Example

Craft your next amazing library using

react18-global-storer18gsHarness 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 { useRGS } from "r18gs";

const RGS_COUNTER_KEY = "counter";

/** Counter Controller */
export const CounterController = () => {
  const [counter, setCounter] = useRGS(RGS_COUNTER_KEY, 0);
  return <input type="number" value={counter} onChange={e => setCounter(Number(e.target.value))} />;
};

/** Counter Display  */
export const CounterDisplay = () => {
  const [counter] = useRGS(RGS_COUNTER_KEY, 0);
  return <div>{counter}</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 { useRGS } from "r18gs";

interface MyStore {
  count: number;
  name: string;
  user: {
    name: string;
    age: number;
  };
}

export const useStore = (includeRegExp?: RegExp | null | 0, excludeRegExp?: RegExp) =>
  useRGS<MyStore>(
    "my-store-with-selectors",
    {
      count: 0,
      name: "John",
      user: {
        name: "John",
        age: 30,
      },
    },
    includeRegExp,
    excludeRegExp,
  );

Featured packages built with this template.

React18 Loaders ->

A comprehensive library providing customizable loading animation components and a fullscreen loader container, seamlessly integrating with React and Next.js.

Nextjs-Darkmode ->

Unleash the Power of React Server Components! Use dark/light mode on your site with confidence, without losing any advantages of React Server Components

Nextjs-Themes ->

🤟 👉 Theme with confidence and Unleash the Power of React Server Components

React 18 Themes ->

🤟 👉 Unleash the Power of React Server Components

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.