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!

On this page