Timer with React

Rodion Chachura

Dec 2, 2018·3 min read

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. You will find this article useful if you are going to build a custom timer. Let’s dive in! Code from this example you can find in this repo.

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 rollupto build our library. To start a new project, we will type these commands:

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

After initializing our project, we will install two libraries.

$ npm install --save styled-components react-document-title

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

Let’s start from the top of our components hierarchy. 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 Timer. Parameter handleBeforeUnload specifies do we want to show modal when a user closes the browser tab. Also worth to mention that user of library pass theme props where he can specify colors of the component. And since we are using styled-components we can set this theme in the root component and every child will be able to access it.

Circle

The Circle component is styled div tag. Here we can see how background color specified by accessing the theme.

TimeFill

The TimeFill component is this yellow moving part of the timer. The only parameter passed to this component is the percent. It defines how much of the circle we need to fill with color.

Time

The last component is the Time. It shows the time left. In this component, we are using the react-document-title library to show time in the browser tab — this feature makes the user experience a little bit better.

App

Don’t forget we also have an example project where we can import the Timer component and make the demo of the library.

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.