Using atomic design to create visual cohesion for your React components

Atomic design is a collection of visual assets that are created with modularity in mind. Imagine if you have to develop all the components from scratch each time. Atomic design lets developers use existing elements to quickly bootstrap together interfaces and works well in a React setting because it is intrinsically atomic by design through component-based modular constructions.

React, visual structure & implementing Atomic Design

Atomic Design breaks down a page into five different layers - atoms, molecules, organisms, templates, and pages. It was initially created by Brad Frost and deals with creating visual structure through design systems. This methodology works well with React's modular approach by enforcing clear separations of visual elements and their associated component. Here is a quick introduction of what each component of Atomic design is and how they fit into your React app.

• Atoms are principal elements like buttons and labels. They are the smallest elements in your app and cannot be further reduced.

• Molecules are a group of atoms. For example, a search bar is a collection of atoms that are visually linked together.

• Organisms are compositions of Atoms and Molecules that build a complex and distinct component with unique behavior. They can be seen as distinct parts of your application such as a footer or header area. In React, components can have their own state management, invoking APIs to fetch data.

• Templates are reusable sets of Organisms put together with Molecules and Atoms for higher-level layout reuse.

Using Atomic design as a guideline for your React app

We can use Atomic design principles to organize our project. Here is an example:

components/
├─ atoms/
│  ├─ submitButton
│  ├─ textInput
├─ molecules/
│  ├─ searchBar
├─ organisms/
│  ├─ header
│  ├─ footer
├─ templates/
│  ├─ blog
├─ pages/
│  ├─ home
│  ├─ blogs

Using Atomic design principles, we've divided our components into its various categories and compositions. Among these five, atoms, molecules and organisms belong to lower-level components, and templates and pages are considered higher-level components.

Designing lower-level components using Atomic design in React

Based on the above file structure, we will be creating the following:

• Submit Button and the Text Input form components as Atoms.
• Search Bar component as a Molecule.
• Header and Footer components as Organisms.

import {
  Button,
} from "react-bootstrap";
import styled from "styled-components";

const ButtonSumbit = styled(Button)`
  border-radius: 2vw;
  margin-left: 4vw;
  &:hover {
    background-color: blue;
  }
`;

function submitButton(props: any) {
    return (
        <ButtonSumbit
            type="submit"
            onClick={() => props.onPress()}
            style={{
                  width: props.w ? props.w : 85,
                  height: props.h ? props.h : 8,
                  marginTop: props.noMar ? 0 : 2,
                  backgroundColor: props.bColor ? props.bColor : '#fff',
                  borderWidth: 2,
                  borderColor: '512da8'
                }}
        ></ButtonSumbit>
    );
}
export default submitButton;

For the Molecule, we can design the Search Bar component using the Submit Button and Text Input Atoms.

import React from "react";
import { Button } from "react-bootstrap";
import styled from "styled-components";
import submitButton from "../atoms/submitButton";
import textInput from "../atoms/textInput";

const searchArea = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
`;

function searchBar(props: any) {
  return (
    <searchArea>
      <ListGroup horizontal>
        <ListGroupItem>
          <textInput></textInput>
        </ListGroupItem>
        <ListGroupItem>
          <submitButton></submitButton>
        </ListGroupItem>
      </ListGroup>
    </searchArea>
  );
}
export default searchBar;

To create the Header Organism, we used the Search Bar Molecule and a List Component from React-Bootstrap.

import React  from "react";
import { ListGroup, ListGroupItem } from "react-bootstrap";
import styled from "styled-components";
import searchBar from "../molecules/searchbar";

const blogHeader = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
`;

function header(props: any) {
  return (
    <blogHeader>
      <ListGroup horizontal>
        <ListGroupItem>
          <p>Search Publications</p>
        </ListGroupItem>
        <ListGroupItem>
          <searchBar></searchBar>
        </ListGroupItem>
      </ListGroup>
    </blogHeader>
  );
}
export default header;

Making higher-level components using Atomic design

Gradually the higher-order components can be defined using a combination of Atoms, Molecules, and Organisms. We can also develop sets of templates to design a full-page UI. According to this example, we can observe an ordered list of dependencies from the higher-level Page to the lower-level Atom.

It’s not mandatory to create a template for every use case. You can directly create a Page if it’s used only in one place. After developing the application, you can illustrate the dependency graph and check whether you have developed the application under the hood of Atomic design concepts.