[logo] a small computer

Wraping Your App in a New Provider in Gatsby

wraping your app in a new provider in gatsby

Bradley Kingsley
Published a year ago.
1 minute read

In React applications, data is passed from the top down via props. As convenient as it is, working with props alone can be cumbersome when dealing with data that is required by many different components.

The best way to circumvent this is by using React context.

Gatsby abstracts a lot of functionality. However, it's possible to hook into the browser API and wrap your components in a Styletron Provider, for instance, by using the wrapRootElement hook.

In your gatsby-browser.js file, you can wrap it around like this:

// gatsby-browser.js
import WrapWithProvider from './wrap-with-provider'
import { Provider as StyletronProvider, DebugEngine } from "styletron-react";
import { Client as Styletron } from "styletron-engine-atomic";
import { StyleReset } from 'atomize';
import React from "react";
const debug = process.env.NODE_ENV === "production" ? void 0 : new DebugEngine();

const engine = new Styletron();
export const wrapRootElement = ({element}) => {
    return (
        <StyletronProvider value={engine} debug={debug} debugAfterHydration>
            <WrapWithProvider element={element}/>
            <StyleReset />
        </StyletronProvider>
    )
};

The same technique can be used to wrap your app in a new provider in Gatsby. Each component will receive a provider from top-level components. You can connect to any store as needed this way.

Now, go forth and make amazing apps!

Copyright © 2020 The Kenyan Dev