statehub v4.1.1

StateHub - Easy Context API for React JS

Everything starts with creating a new StateHub with createHub, this StateHub is everything you will ever need in your components, no other unnecessary imports!

import { createHub } from "statehub";

export const DemoHub = createHub({
  state: { title: "Welcome to StateHub" },
  reducer: (state, action) => {
    switch (action.type) {
      case "CHANGE_TITLE": {
        return {
          title: "This is the changed StateHub title.",
        };
      }
      default:
        return state;
    }
  },
  methods: {
    LogSomething: function () {
      console.log("Hello Statehub");
    },
    AlertSomething: function () {
      alert("StateHub Alert!");
    },
    useDemoHook: function () {
      const [buttonText, setButtonText] = useState("useDemoHook");
      return [buttonText, setButtonText];
    },
  },
});

Now wrap your App with the Provider who comes with the DemoHub you created before.

*As you can see the API is very clean everything you ever import is your created StateHub and nothing more.

import React from "react";
import { DemoHub } from "../statehubs/DemoHub";

export default function Index() {
  return (
    <DemoHub.Provider>
      <App />
    </DemoHub.Provider>
  );
}

Now you can use the state in your component.

Everything you need is coming from your created StateHub, no other imports are required except your DemoHub.

import React from "react";
import { DemoHub } from "../statehubs/DemoHub";

function App() {
  // call .use() or .methods() to use the state or custom methods.
  const [state, dispatch] = DemoHub.use();
  const { LogSomething, AlertSomething, useDemoHook } = DemoHub.methods();

  const [buttonText, setButtonText] = useDemoHook();

  return (
    <div>
      <h2>{state.title}</h2>
      <button onClick={() => dispatch({ type: "CHANGE_TITLE" })}>
        Change Title
      </button>

      <h2>Method Example 1:</h2>
      <button type="button" onClick={LogSomething}>
        Log something to the console
      </button>

      <h2>Method Example 2:</h2>
      <button type="button" onClick={AlertSomething}>
        Trigger alert
      </button>

      <h2>Method Custom Hook example 3:</h2>
      <button type="button" onClick={() => setButtonText("Hooked!")}>
        {buttonText}
      </button>
    </div>
  );
}

export default App;

state & reducer is optional that means you can create StateHub's with methods only and retrieve them directly where needed by calling YourHub.methods().

import React from "react";
import { DemoHub } from "../statehubs/DemoHub";

function App() {
  const { LogSomething, AlertSomething } = DemoHub.methods();

  return (
    <div>
      <h2>Method Example 1:</h2>
      <button type="button" onClick={LogSomething}>
        Log something to the console
      </button>

      <h2>Method Example 2:</h2>
      <button type="button" onClick={AlertSomething}>
        Trigger alert
      </button>
    </div>
  );
}

export default App;

You can use as many StateHubs as you want.

import React from "react";
import App from "../components/App";
import {
  AuthHub,
  DatabaseHub,
  ResponsiveHub,
  ModalHub,
} from "../statehubs/DemoHub";

export default function Index() {
  return (
    <AuthHub.Provider>
      <DatabaseHub.Provider>
        <ResponsiveHub.Provider>
          <ModalHub.Provider>
            <App />
          </ModalHub.Provider>
        </ResponsiveHub.Provider>
      </DatabaseHub.Provider>
    </AuthHub.Provider>
  );
}

Support for Class Components:

To support React < 16.8.0, where the Context needs to be consumed by class components here the render-prop based API for context consumers:

import React from "react";
import { DemoHub } from "../statehubs/DemoHub";

class App extends React.Component {
  render() {
    return (
      <DemoHub.Consumer>
        {(state, dispatch, methods) => (
          <div>
            <h2>{state.title}</h2>
            <button onClick={() => dispatch({ type: "CHANGE_TITLE" })}>
              Change Title
            </button>

            <h2>Method Example 1:</h2>
            <button type="button" onClick={methods.LogSomething}>
              Log something to the console
            </button>

            <h2>Method Example 2:</h2>
            <button type="button" onClick={methods.AlertSomething}>
              Trigger alert
            </button>
          </div>
        )}
      </DemoHub.Consumer>
    );
  }
}