Migrating from Fannypack? Check out the Fannypack to Bumbag migration guide

#Getting started

Firstly, install Bumbag:

npm install bumbag

Once you have installed the bumbag module, wrap your application in a "<BumbagProvider>":

import { Provider as BumbagProvider } from 'bumbag';
const App = () => (
<BumbagProvider>
Hello world!
</BumbagProvider>
);

Now, you can start using the Bumbag components:

import { Button, Provider as BumbagProvider } from 'bumbag';
const MyApp = () => (
<BumbagProvider>
<Button>
Hello world!
</Button>
</BumbagProvider>
);

Note: You can override Bumbag's default theme by passing a theme prop to <BumbagProvider>. Click here to find out how to add a theme.

#Usage with Gatsby

In order to use Bumbag with Gatsby, you will firstly need to install the Gatsby plugin for Bumbag.

npm install gatsby-plugin-bumbag

Then, we will add this plugin to your app's gatsby-config.js:

module.exports = {
plugins: ['gatsby-plugin-bumbag']
}

After that, we will add the <BumbagProvider> to our gatsby-browser.js file:

import React from 'react';
import { Provider as BumbagProvider } from 'bumbag';
export const wrapRootElement = ({ element, ...props }) => (
<BumbagProvider>
{element}
</BumbagProvider>
);

We will also have to add a few lines to our gatsby-ssr.js file:

export { wrapRootElement } from './gatsby-browser';

Now, you can freely use Bumbag in your Gatsby app!

#Usage with Next.js

In order to use Bumbag with Next.js, you will firstly have to set your Next.js app for SSR with Bumbag.

Firstly, you will need to install bumbag-server:

npm install bumbag-server

Open up your _document.js file, and add the following:

import Document, { Head, Html, Main, NextScript } from 'next/document'
import { extractCritical } from 'bumbag-server'
import { InitializeColorMode } from 'bumbag'
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
const styles = extractCritical(initialProps.html)
return {
...initialProps,
styles: (
<>
{initialProps.styles}
<style
data-emotion-css={styles.ids.join(' ')}
dangerouslySetInnerHTML={{ __html: styles.css }}
/>
</>
),
}
}
render() {
return (
<Html>
<Head />
<body>
<InitializeColorMode />
<Main />
<NextScript />
</body>
</Html>
);
}
}

Then, open up your _app.js file, and add the <BumbagProvider>:

Make sure you add isSSR as a prop to BumbagProvider. This will help with color mode consistency.

import NextApp from 'next/app';
import { Provider as BumbagProvider } from 'bumbag';
export default class App extends NextApp {
render() {
const { Component, pageProps } = this.props;
return (
<BumbagProvider isSSR>
<Component {...pageProps} />
</BumbagProvider>
);
}
}

Now you can freely use Bumbag in your Next.js app!

Copyright © 2020 Jake Moxey