ctx - custom hook example

gistfile1.txt

import React from 'react';

const SpicyCtx = React.createContext(null);

// 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 } from 'a-special-place';

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

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

const App = () => (
  <SpicyCtx.Provider value="scary">
    <div>
      <BlandFood />
    </div>
  </SpicyCtx.Provider>
);