Using React Context API in Gatsby

React Site Context

The Context API is not a redux replacement but it works very well for saving the application state. It helps a lot if you want to share state between multiple components that are not at the same level.

In n regular React applicacion, you normally have a common entry point, an App.js or an index.js. In case of gatsby, you need to edit the file gatsby-browser.js.

import React from "react";
import { SiteContextProvider } from "./src/context/SiteContext";
const wrapRootElement = ({ element }) => (
  <SiteContextProvider>{element}</SiteContextProvider>
);

export { wrapRootElement };

In that case, SiteContext would be the context file that contains the state of your site.

import React from "react";

const defaultState = {};
const SiteContext = React.createContext(defaultState);

const SiteContextProvider = ({ children }) => {
  return <SiteContext.Provider>{children}</SiteContext.Provider>;
};

export default SiteContext;

export { SiteContextProvider };