DEV Community

Cover image for Easy global state in React which can be used outside React components too
Richard Lindhout
Richard Lindhout

Posted on • Updated on

Easy global state in React which can be used outside React components too


react-ridge-state πŸ‹οΈβ€β™€οΈ ⚑️ πŸ‹οΈβ€β™‚οΈ

Simple πŸ’ͺ fast ⚑️ and small 🎈 (500 bytes) global state management for React which can be used outside of a React component too!

yarn add react-ridge-state


npm install react-ridge-state --save

Why another state library πŸ€”

We were frustrated that the current solutions could often only be used from React or have too complicated APIs. We wanted a lightweight solution with a smart API that can also be used outside React components.

Features πŸ€Ήβ€β™€οΈ

  • React / React Native
  • Simple
  • Fast
  • Very tiny (500 bytes)
  • 100% Typesafe
  • Hooks
  • Use outside React components

Roadmap πŸƒβ€β™€οΈ πŸƒβ€β™‚οΈ

  • Custom selectors for deep state selecting

Getting started πŸ‘ πŸ‘Œ

Create a new state

import { newRidgeState } from "react-ridge-state";
interface CartProduct {
  id: number;
  name: string;
export const cartProductsState = newRidgeState<CartProduct[]>([
  { id: 1, name: "Product" },

Use state inside components

import { cartProductsState } from "../cartProductsStatee";

const [cartProducts, setCartProducts] = cartProductsState.use();

Use state outside of React

import { cartProductsState } from "../cartProductsStatee";

Set state outside of React

import { cartProductsState } from "../cartProductsStatee";

// simple and direct
cartProductsState.set([{ id: 1, name: "NiceProduct" }]);

// if you want previous state as callback
cartProductsState.set((prevState) => [
  { id: 1, name: "NiceProduct" },

// you can also use a callback so you know when state has rendered
  (prevState) => [...prevState, { id: 1, name: "NiceProduct" }],
  (newState) => {
    console.log("New state is rendered everywhere");

Counter example

import { newRidgeState } from "react-ridge-state";

// this can be used everywhere in your application
export const globalCounterState = newRidgeState<number>(0);

function CounterComponent() {
  const [count, setCount] = globalCounterState.use();
  return (
      <div>Count: {count}</div>
      <button onClick={() => setCount(c + 1)}>Add 1</button>

// you can use these everywhere in your application the globalCounterState will update automatically
// even if set globally
function CounterViewer() {
  const count = globalCounterState.useValue();

  return (
      <div>Count: {count}</div>

Persistence example

It's possible to add persistency to your state. (add try/catch if you use localStorage in real app)

const authStorageKey = "auth";
const authState = newRidgeState<AuthState>(
  getInitialState() || emptyAuthState,
  { onSet }

// getInitialState fetches data from localStorage
function getInitialState() {
  let initialState = undefined;
  const item = localStorage.getItem(authStorageKey);
  if (item) {
    initialState = JSON.parse(item);

// onSet is called after state has been set
function onSet() {
  // save to local storage
  localStorage.setItem(authStorageKey, JSON.stringify(newState));

About us

We want developers to be able to build software faster using modern tools like GraphQL, Golang, React Native without depending on commercial providers like Firebase or AWS Amplify.

Checkout our other products too! πŸ‘Œ

Top comments (0)