Up and Running With Reakit

In this article I’ll bring you up to speed on Reakit, a toolkit for building React UIs. Together we’ll build a customer information form using Reakit components. If you’re looking to understand how to start creating components with it in a short amount of time, read on!

What We’ll Be Building

Reakit offers a library of components that allow you to quickly put together a wide variety of UIs in React. This makes it great for everything from rapid prototyping to production. For this article I decided to build a contact information form.

Project Setup

Setup a new project with Create React App

Reakit only depends on React which keeps things light. We’ll leverage Create React App to speed along our development. Just realize it is not required to leverage Reakit.

$ npx create-react-app reakit-checkout
$ cd reakit-checkout

Launch the development environment

Create React App took care of installing React and its dependencies for us. It also sets up a convenient development environment for us. Let’s make sure everything is running properly.

Yarn:

$ yarn start

Or with npm:

$ npm run start

You should see the default Create React App page:

Install Reakit

We’ll now install Reakit and its default theme.

Yarn:

$ yarn add reakit reakit-theme-default

Or using npm:

$ npm install -S reakit reakit-theme-default

“Hello world!” test

Let’s do one more quick test to make sure Reakit is installed correctly and able to render components within our app. We’ll leverage the Provider and Paragraph components from Reakit to generate a “Hello world!” message.

Let’s first create a new file in the src directory and call it CustomerInfo.js.

import React, { Component } from 'react';
import { Provider, Paragraph } from 'reakit';
import theme from 'reakit-theme-default';

class CustomerInfo extends Component {
  render() {
    return (
      <Provider theme={theme}> // Easily add theme support to your UIs
        <Paragraph>Hello world!</Paragraph>
      </Provider>
    );
  }
}

export default CustomerInfo;

Next let’s modify the src/App.js to return the new CustomerInfo component we just created:

import React, { Component } from 'react';

import CustomerInfo from './CustomerInfo';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <CustomerInfo />
      </div>
    );
  }
}

export default App;

Once you save your changes you should see the app page refresh. You should see a blank white page with the text “Hello world!”. Now you might’ve been expecting something shiny already. However, Reakit renders a simple <p> element in the DOM. This showcases an aspect of Reakit that I really appreciate. Its implementation of the Single Element Pattern and the lightweight footprint it leaves as a result.

Most importantly, in terms of our project, it means Reakit has been installed correctly and we’re ready to rock!

Building the Form

Adding some contrast

Let’s quickly make a few additions to src/App.css to change the background color and set a width for our form. This will help the form inputs stand out against the background as we develop.

.App {
  background: #ccc;
  width: 400px;
}

/* ... */

In a normal scenario you’d probably want to do something more elaborate to support different devices and screen sizes. For the scope of our project it will work just fine.

Adding our unstyled form

Let’s get to work on building our form. We’ll go back into CustomerInfo.js and remove our “Hello world!” Paragraph component. We’ll replace it with our form using the Group, Field, Input, Label and Button components from Reakit.

import React, { Component } from 'react';
import { Provider, Group, Field, Label, Input, Button } from 'reakit';
import theme from 'reakit-theme-default';

class CustomerInfo extends Component {
  render() {
    return (
      <Provider theme={theme}>
        <Group vertical> {/* Groups the entire form as a single child */}
          <Field> {/* Groups label and input as a field */}
            <Label>
              First name <Input />
            </Label>
          </Field>
          <Field>
            <Label>
              Last name <Input />
            </Label>
          </Field>
          <Field>
            <Label>
              Email <Input />
            </Label>
          </Field>
          <Field>
            <Label>
              <Input type="checkbox" /> Subscribe to our newsletter!
            </Label>
          </Field>
          <Field>
            <Label>
              Address <Input />
            </Label>
          </Field>
          <Field>
            <Label>
              City <Input />
            </Label>
          </Field>
          <Field>
            <Label>
              State <Input />
            </Label>
          </Field>
          <Field>
            <Label>
              Zip <Input />
            </Label>
          </Field>
          <Button>Submit</Button>
        </Group>
      </Provider>
    );
  }
}

export default CustomerInfo;

After saving our changes you’ll see that our form is rendering in our app. It doesn’t look that great yet though. The layout is in place for the most part, but it needs some polish. So let’s give it some love.

Adding some styles

Reakit supports adding styles in three different ways: Styled Components, inline styles and themes. We’ll go ahead and leverage the Styled Components method.

import React, { Component } from 'react';
import { styled, Provider, Group, Field, Label, Input, Button } from 'reakit';
import theme from 'reakit-theme-default';

// Set custom styles using styled()
const StyledField = styled(Field)`
  padding: 5px 10px;
`;
const StyledInput = styled(Input)`
  border: 1px solid #777;
  margin-top: 3px;
`;
const StyledButton = styled(Button)`
  margin: 5px 10px 10px;
`;

class CustomerInfo extends Component {
  render() {
    return (
      <Provider theme={theme}>
        <Group vertical>
          <StyledField> {/* Use the styled version of Field */}
            <Label>
              First name <StyledInput /> {/* Use the styled version of Input */}
            </Label>
          </StyledField>
          <StyledField>
            <Label>
              Last name <StyledInput />
            </Label>
          </StyledField>
          <StyledField>
            <Label>
              Email <StyledInput />
            </Label>
          </StyledField>
          <StyledField>
            <Label>
              <StyledInput type="checkbox" /> Subscribe to our newsletter!
            </Label>
          </StyledField>
          <StyledField>
            <Label>
              Address <StyledInput />
            </Label>
          </StyledField>
          <StyledField>
            <Label>
              City <StyledInput />
            </Label>
          </StyledField>
          <StyledField>
            <Label>
              State <StyledInput />
            </Label>
          </StyledField>
          <StyledField>
            <Label>
              Zip <StyledInput />
            </Label>
          </StyledField>
          <StyledButton>Submit</StyledButton> {/* Use the styled version of Button */}
        </Group>
      </Provider>
    );
  }
}

export default CustomerInfo;

Once you save your changes you should now see a form that looks a little more friendly to the eyes. If I were taking this to production I’d still have a long way to go. But hopefully you see just how easy it is to start adding styles using the Styled Components support built into Reakit.

Conclusion

Reakit comes loaded with some great features. I challenge you to check out the Reakit docs and have a look at all of the powerful features it offers. I think you’ll be pleasantly surprised. You may even be tempted to use it in an upcoming project.