Usage with Gatsby

[radenkovic]

Hi folks, this is very nice library for doing grid!

Just wanted to help to other people who are trying to set up with gatsby:

To add custom configuration you need 2 files:

1. gatsby-browser.js

import { setConfiguration } from 'react-grid-system';
// Here we configure grid
setConfiguration({ maxScreenClass: 'xl', defaultScreenClass: 'xl' });

2. gatsby-ssr.js

const { setConfiguration } = require('react-grid-system');

exports.onPreRenderHTML = () => {
  // Here we configure grid
  setConfiguration({ maxScreenClass: 'xl', defaultScreenClass: 'xl' });
};

3. Also you need to wrap all components in <ScreenClassProvider /> so pages look exactly the same and layout does not get re-rendered after initial hydration.

I think this can be documented in examples or in README.md but took me some time to set it up.

If there are any questions feel free to ask!

[sephi-dev]

I'm looking to a similar solution for NextJS. I guess we have the same issue here.

[radenkovic]

@davidvenin same solution should technically work for NextJS (though I did not test). in getInitialProps do the same thing as I did in gatsby-ssr.js and it should do the trick.