Breaking News: Grepper is joining You.com. Read the official announcement!

gatsby-plugin-layout

leethacker answered on October 8, 2022 Popularity 3/10 Helpfulness 1/10

answer gatsby-plugin-layout

gatsby-plugin-layout

Comment

// Context.js https://www.gatsbyjs.com/plugins/gatsby-plugin-layout/
import React from "react"

const defaultContextValue = {
  data: {
    // set your initial data shape here
    menuOpen: false,
  },
  set: () => {},
}

const { Provider, Consumer } = React.createContext(defaultContextValue)

class ContextProviderComponent extends React.Component {
  constructor() {
    super()

    this.setData = this.setData.bind(this)
    this.state = {
      ...defaultContextValue,
      set: this.setData,
    }
  }

  setData(newData) {
    this.setState(state => ({
      data: {
        ...state.data,
        ...newData,
      },
    }))
  }

  render() {
    return <Provider value={this.state}>{this.props.children}</Provider>
  }
}

export { Consumer as default, ContextProviderComponent }

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: www.gatsbyjs.com

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Oct 08 2022

leethacker

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

gatsby-plugin-layout

Contents

More Related Answers

gatsby-plugin-layout

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.