Providers

Your components might need some global React Context Provider. This is typically used for localization, state sharing or routing. You can add a provider to individual stories through [decorators]. You can also create a global provider by adding .ginger-book/components.tsx (or .ts, .jsx, or .js):

import type { GlobalProvider } from "@ginger-society/ginger-book";

export const Provider: GlobalProvider = ({
  children,
  globalState,
  storyMeta,
}) => (
  <>
    <h1>Theme: {globalState.theme}</h1>
    <h2>{storyMeta.customValue}</h2>
    {children}
  </>
);

Now, all stories will have the same heading. The global provider also has access to the globalState (the addon state) so you can set your providers based on light vs dark theme or RTL and storyMeta to access the story metadata.

GingerBook Context

Warning: This is an experimental API that can be changed or removed with any release.

GingerBook exports the useGingerBookContext hook that gives you full access to the whole internal globalState and a dispatch function, so you can also modify it within your stories. For example, your story can inspect and change the GingerBook theme. It can control all other addons as well. Example:

import { useGingerBookContext, ActionType, ThemeState } from "@ginger-society/ginger-book";

export const StoryChangingTheTheme = () => {
  const { globalState, dispatch } = useGingerBookContext();
  return (
    <>
      <p>Active theme: {globalState.theme}</p>
      <button
        onClick={() =>
          dispatch({
            type: ActionType.UpdateTheme,
            value:
              globalState.theme === ThemeState.Dark
                ? ThemeState.Light
                : ThemeState.Dark,
          })
        }
      >
        Switch theme
      </button>
    </>
  );
};