Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
gatsby-plugin-layout
Advanced tools
Reimplements the behavior of layout components in gatsby@1, which was removed in version 2.
This plugin enables adding components which live above the page components and persist across page changes.
This can be helpful for:
This plugin reimplements the behavior of layout components in gatsby@1
, which was removed in version 2.
npm install gatsby-plugin-layout
Add the plugin to your gatsby-config.js
:
By default plugin will try to use Layout component located in src/layouts/index.js
(same as Gatsby v1)
module.exports = {
plugins: [`gatsby-plugin-layout`],
}
If you prefer to keep layout in different place, you can use component
option:
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-layout`,
options: {
component: require.resolve(`./relative/path/to/layout/component`),
},
},
],
}
Once the plugin is added, you don't need to manually wrap your pages with the Layout component. The plugin does this automatically.
There are a few scenarios where it makes sense to reimplement the V1 layout handling:
In the original implementation, the layout component was wrapped around the outside of the page component, which, in pseudo-code, looked something like this:
<Root>
<Layout>
{/* layout is not affected when the page template changes */}
<PageElement>{/* page content here */}</PageElement>
</Layout>
</Root>
This meant that the layout component could manage things like transitions and persistent state without any special workarounds, because it never rerendered.
In version 2, the layout component is no longer special, and it's included in every page that wants to display it. This means that it does rerender on every route change:
<Root>
<PageElement>
{/* layout will rerender each time the page template changes */}
<Layout>{/* page content here */}</Layout>
</PageElement>
</Root>
This can make it complicated to support transitions or state without using the wrapPageElement
browser API (and the SSR equivalent). This plugin implements those APIs for you, which reimplements the behavior of Gatsby V1.
Use React Context to pass data both ways.
For example you can use this boilerplate:
// Context.js
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 }
Use Provider in Layout Component:
import { ContextProviderComponent } from "./Context"
export default ({ children }) => (
<ContextProviderComponent>
<Header />
{children}
<Footer />
</ContextProviderComponent>
)
And then you can use it anywhere:
import ContextConsumer from "./Context"
const ComponentThatReadState = () => (
<ContextConsumer>
{({ data }) => {
data.menuOpen ? <Menu /> : null
}}
</ContextConsumer>
)
import ContextConsumer from "./Context"
const ComponentThatChangeState = () => (
<ContextConsumer>
{({ data, set }) => (
<div onClick={() => set({ menuOpen: !data.menuOpen })}>
{data.menuOpen ? `Opened Menu` : `Closed Menu`}
</div>
)}
</ContextConsumer>
)
If you want to use different layouts for different pages, you can pass this information in the context of the pages you create, and then conditionally render in your layout file.
In gatsby-node.js
:
exports.onCreatePage = ({ page, actions }) => {
const { createPage } = actions
if (page.path.match(/special-page/)) {
page.context.layout = "special"
createPage(page)
}
}
And then in src/layouts/index.js
:
export default ({ children, pageContext }) => {
if (pageContext.layout === "special") {
return <AlternativeLayout>{children}</AlternativeLayout>
}
return <RegularLayout>{children}</RegularLayout>
}
FAQs
Reimplements the behavior of layout components in gatsby@1, which was removed in version 2.
The npm package gatsby-plugin-layout receives a total of 19,231 weekly downloads. As such, gatsby-plugin-layout popularity was classified as popular.
We found that gatsby-plugin-layout demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.