ctx - custom provider example

import React from 'react';

const SpicyCtx = React.createContext(null);

// custom provider
export const SpicyProvider = ({ children }) => {
  const [spice, setSpice] = React.useState("scary");

  const api = {
    gingerSpice: () => setSpice("ginger"),
    sportySpice: () => setSpice("sporty")
  };

  return (
    <SpicyCtx.Provider value={{ spice, ...api }}>{children}</SpicyCtx.Provider>
  );
};

// custom hook
export const useSpicyState = () => {
  const ctx = React.useContext(SpicyCtx);

  if (!ctx) {
    throw new Error("useSpicyState must be used within the SpicyProvider");
  }

  return ctx;
};

// in another file
import { useSpicyState, SpicyProvider } from 'a-special-place';

const BlandFood = () => {
  const { spice } = useSpicyState();

  return <>{spice}</>;
};

const SpiceButtons = () => {
  const { sportySpice, gingerSpice } = useSpicyState();

  return (
    <>
      <button type="button" onClick={sportySpice}>
        Sporty
      </button>
      <button type="button" onClick={gingerSpice}>
        Ginger
      </button>
    </>
  );
};

const App = () => (
  <SpicyProvider>
    <div>
      <BlandFood />
      <SpiceButtons />
    </div>
  </SpicyProvider>
);