This past week or two has seen a flood of new browser lifecycle APIs :-) which I guess means some people are building some interesting Gatsby sites!
In the latest @iansu added in #666 two ways of modifying the “Root” Gatsby React component. A low-level API replaceDOMRenderer and high-level one wrapRootComponent.
The high-level API is if you want to simply wrap the root component e.g. to add Redux or Mobx to a Gatsby site.
// in your gatsby-browser.js
import { Provider } from 'react-redux'
import store from './store'
// This gets returned to Gatsby which then renders the Root component as normal.
exports.wrapRootComponent = Root => {
return () => (
<Provider store={store}>
<Root />
</Provider>
);
};The low-level API is for completely replacing the DOM rendering e.g. if you want to override the default React Router setup.
// in your gatsby-browser.js
import { applyRouterMiddleware, hashHistory, Router } from 'react-router'
// Change the router to use hashHistory instead of browserHistory
exports.replaceDOMRenderer = ({ routes, defaultShouldUpdateScroll, onUpdate }) => (
ReactDOM.render(
<Router
history={hashHistory}
routes={routes}
render={applyRouterMiddleware(useScroll(defaultShouldUpdateScroll))}
onUpdate={onUpdate}
/>,
typeof window !== 'undefined' ? document.getElementById('react-mount') : void 0)
)In the land of bug fixes, @4rkanoid noticed that Gatsby wasn't handling correctly custom site .babelrc files that had presets in their array form. #668
Thanks all for your great PRs!