Galactic Context

Easy, efficient state management with React Context.

Install

npm i galactic-context

Motivation

Context has a lot of boilerplate that would be nice to reduce (though less than Redux). You can also have complications if you have Provider state values that depend on each other. No Provider can easily access the Context values of it's children.

Galactic Context allows you to have a single "StateProvider" to store all of the values you would consider using "globally" across components in your app. It generates "value" and "setter" hooks for you, and when a "setter" hook gets called to update state, only the components consuming the "value" hooks will update (not your entire app).

Usage

createGalacticContext receives a single argument--an object corresponding to key value pairs, for which the resulting object will return setter hooks and getter hooks. The getter hooks will be named as "usePropertyName" and "useSetPropertyName".

createGalacContext also includes the StateProvider, which will use to wrap your app.

const {
  StateProvider,
  getters: { useCounter, useEmail },
  setters: { useSetCounter, useSetEmail },
} = createGalacticContext({
  counter: 0,
  email: "",
});

function App() {
  <StateProvider>
    <CounterComponent label="component 1" />
    <CounterComponent label="component 2" /> // Both CounterComponents will update
    when the setter for `useCounter` is called.
    <EmailComponent /> // EmailComponent WON'T rerender when the setter for
    `useCounter` is called.
  </StateProvider>;
}

function CounterComponent({ label }) {
  const counter = useCounter();
  const setCounter = useSetCounter();

  return (
    <div>
      <h1>{`${label}, ${counter}`}</h1>
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
    </div>
  );
}

function EmailComponent() {
  const email = useEmail();
  const useSetEmail = useSetEmail();

  return <input onChange={(e) => setEmail(e.target.value)} value={email} />;
}

createGalacticContext will include StateContext in it's returned object, but it's unlikely you'll need it (you'd probably only want to use it in conjunction with RxJS). It includes the observers for all of the properties, the names of which match the object you passed to createGalacticContext.

Debugger

StateProvder accepts an options debug param.

You can pass it:

1. * to console.log the key and new value of every setter that gets called.
2. A regular expression to console.trace each setter call (good for tracking where state is being set from).
3. A function that receives the key and new value of the setter.

return (
  <StateProvider
    debug={(key, newValue) => {
      if (key === "counter") {
        debugger;
      }
    }}
  >
    <App />
  </StateProvider>
);