In this article, we are going to make React component that will be available as an NPM module. So we can use this component in different projects. This component shows a timeline of the day where activities colored with a different color. Code from this example you can find in this repo. Let’s dive in!

Image for post
Image for post
timer by increaser.org

create-react-library

Create-react-app is a great tool for bootstrapping the front-end project, and I always use it for new projects. However, since we want to make an NPM module, we need a different starter. After some research, I found a tool, named create-react-library that using create-react-app to run demo and rollup to build our library. To start a new project, we will type these commands:

$ npm install -g create-react-library
$ create-react-library increaser-timeline
$ cd increaser-timeline

After initializing our project, we will install two libraries.

$ npm install --save styled-components luxon

And add additional fields in the rollup.config.js file.

...
external: ['styled-components'],
globals: { 'styled-components': 'styled' }
}

First, we will run rollup to watch our src module and automatically recompile it into dist whenever we make changes.

$ npm start

The second part will be running the example create-react-app that’s linked to the local version of our module. In another tab:

$ cd example
$ npm start

Development

Index

A lot of libraries requires width and height to specify size, but we will make it another way. We will require Wrapper component to be passed by props. And via refs, we will figure out the size of the Timeline. The second parameter is sets — an array of such objects:

{
start: 1544027788352,
end: 1544029330137,
color: 'gold'
}

If you will track what you do during the day and give each activity color you will have an array of sets:)

Image for post
Image for post
components directory

Container

The Container component is styled div tag. Here we can see how background color specified by accessing a theme. Inside of this component, we will have colored blocs that represent activities.

Period

The Period component represents set. Since we know when the first set started and the total time interval in seconds we can show activity on the timeline by using margin and width.

Time

The Time component shows the start and the end of the timeline. The start is simply the start of the first set and end is our last calculated hour.

App

Don’t forget we also have an example project where we can import the Timeline component and make the demo of the library. An interesting part in the demo is that we generate random sets and repeat it over and over.

For Medium readers, I provide a Udemy course How to Start React Project: Best Practices for 9.99$. The goal of this course is to share with You my findings of the last few years about what steps and decisions are better to make at the beginning of development so that you will have a good starting point for your new project.

Reach the next level of focus and productivity with increaser.org.

Image for post
Image for post
Increaser

Written by

Software engineer, creator of increaser.org. More at geekrodion.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store