Storybook : develop React components in isolation | Part-2
Tags: react, storybook, design, styleguide
Published: 2019-10-14 20:44:10

On the Part-1 of this series [<b>Storybook : develop React components in isolation | Part-1</b>](https://dev.to/destro_mas/storybook-develop-react-components-in-isolation-part-1-4e6l) , we talked about how we can setup Storybook and start working for our awesome UI-components Library.

Today we will see how we can create our first UI component and add it to Storybook. We will also see how we can see variations for the same component.


I will remove the welcome file `src/stories/0-Welcome.stories.js` which was created by the tool. Now our app structure looks like below-

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ek1kqmhxca530387wlkl.png)

Let's create a new component inside `src/components/Spinner.js` file.

I will use `styled-components` to style this new component. To read about `style-components`, please read my another article [Style React component with styled-components : Part-1](https://dev.to/destro_mas/style-react-component-with-styled-components-part-1-19fl)

Our new `Spinner` component's code is here :point_down:

```javascript
import React, { Component } from "react";
import styled from "styled-components";

const StyledSpinner = styled.div`
  border: 16px solid ${props => props.color || "red"};
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
`;

class Spinner extends Component {
  render() {
    const { color } = this.props;
    return <StyledSpinner color={color} />;
  }
}

export default Spinner;

```

Cool, our component is done. Now we need to add this to the Storybook tool to visualise.

I am gonna create a new file `src/stories/2-Spinner.stories.js` and will import `Spinner` component here export default UI options so that Storybook tool can pick up it.

```javascript
import React from "react";
import Spinner from "../components/Spinner";

export default {
  title: "Spinner"
};

export const byDefault = () => <Spinner />;
```

Now if we run `yarn storybook` on terminal, we can see this :point_down: on our browser!

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nq26r21kz1jizk0fnjd2.png)


Tada :tada:
We can now see and test our new component inside the Storybook tool.

I will add few more variations for this, so that we can see how it will look if we change the props.

```javascript
export const blue = () => <Spinner color="blue" />;

export const orange = () => <Spinner color="orange" />;
```

After adding this code :point_up:, if we now go to the browser we can see total 3 variations for the same Component.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/q67nnbaosv97cz9gl9zs.png)

Awesome!

On the next part, I will write about Addons and other cool stuff.

Till then,Cheers
:wave:

As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❤️😊🌸
<a href="https://www.buymeacoffee.com/destromas" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

My Blog: https://shahjada.me