React Salty State

A simple global state system for React. Built on top of react-sweet state. This exists because I got annoyed passing callbacks to child components and wanted to minimize writing boilerplate.

There are three hooks. Each takes a string argument that sets the scope. Each scope represents a global data store.

The main hook is useSalty

1const [{value, other_value}, set] = useSalty('this_scope')

This returns an array. The first element is the data for this scope. If an item has not been set yet, it will be null.

The second element is the set function. It takes an object comprised of key-value pairs as its only argument:

1set({value: 56, other_value: "Hello", yet_another_value: [4,6,4.5]})

set merges the current data with the object passed as an argument.

The other two hooks are for convenience:

1const {value, other_value} = useSaltyRead('this_scope')

This returns items in the data store without the set function.

1const set = useSaltyWrite('this_scope')

This returns only the set function.

Example Usage

1/**
2 * Component to show the sum of some numbers
3*/
4function A(){
5  // Get values and the setter for the 'test' scope
6  const[{x, y, z}, set] = useSalty('test');
7
8    // Set some initial values on mount
9  React.useEffect(() => {
10    set({
11      x: 6,
12      y: 15,
13      z: 98
14    });
15  }, []);
16
17  // Render the sum
18  return (
19    <div>{x} + {y} + {z} = {x+y+z}</div>
20  );
21}
22
23
24/**
25 * Component with buttons to increment values
26 */
27function B(){
28  // Get the values and the setter for the 'test' scope using helper hooks
29  const {x, y, z} = useSaltyRead('test');
30  const set = useSaltyWrite('test');
31
32  // Render some buttons that increment x, y, and z by 1, 2, and 3
33  return (
34    <>
35      <button onClick={() =>set({x: x+1})}>X</button>
36      <button onClick={() =>set({y: y+2})}>Y</button>
37      <button onClick={() =>set({z: z+3})}>Z</button>
38    </>
39  )
40  
41}
42
43/**
44 * Render A and B
45 */
46const App = () => {
47  // Get values for a scope named 'other'
48  const {x, y, z} = useSaltyRead('other');
49
50  // Render A and B, 
51  return (
52    <>
53      <A/>
54      <B/>
55      <div>In the 'other' scope, x={x || "null"}, y={y || "null"}, and z={z || "null"}</div>
56    </>
57  );
58};

This displays as: