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 time picker. Let’s dive in! Code from this example you can find in this repo.

Image for post
Image for post
time-picker 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-timepicker
$ cd increaser-timepicker

After initializing our project, we will install the only additional library we will need.

$ npm install --save styled-components

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 TimePicker. To handle changes in our user finger or mouse position we will add event handlers to Container component. Father in the updatePosition() function we will determine the new value that the user selected by computing mouse angle relative to the center of TimePicker. Also worth to mention that users of library pass theme props where he can specify some colors of the time picker. 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.

Image for post
Image for post
components directory

Circle

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

Minutes

In Minutes components we lay text evenly inside the circle by using some trigonometry. You may find getMinutes() little bit confusing, yet it simply returns an array of minutes [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60]. Just always trying to keep immutability:)

Line

Line component is an SVG line element. Here we also use sinuses and cosines:)

Start

Start component is the button with the rocket. It placed absolutely in the center of the container. Also worth to mention that we need to handle onMouseDown() event here and call stopPropagation() because we don’t want this problem:)

Image for post
Image for post

App

Don’t forget we also have an example project where we can import the TimePicker component.

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