The easiest way to automate or schedule component rendering in react app

I’d like to give you a brief tutorial on how to create crontab, automate or schedule functions and component rendering in the react app. In this project, we will automate notification rendering, set it up to render at a particular time. BTW, this is what is called Crontab.

In case you don’t know what crontab is

The crontab is a list of commands that you want to run on a regular schedule. By using this, you can schedule tasks and set them to run whenever you want. one of the most popular crontabs is built in Linux OP. You can learn Linux crontab https://www.geeksforgeeks.org/crontab-in-linux-with-examples/

What we will build

We will create a somewhat good-looking notification and configure it to be displayed or rendered at particular times. It means that regardless of the user’s action like clicking a button or going to another page, this notification will be rendered automatically and displayed on the screen when it meets the time condition. Pretty exciting huh?.

Firstly, let’s set up our reactjs project.

Option 1

I’ve prepared a sample project to help you easily set up this project. visit my GitHub page to clone reactjs-crontab-tutorial project at https://github.com/shawnscoding/reactjs-crontab-tutorial

Clone this project.

open your terminal.

git clone https://github.com/shawnscoding/reactjs-crontab-tutorial
cd reactjs-crontab-tutorial
npm install

This will set all things up

Option 2

You can directly use my example code in your existing react project as well. click here to copy the below code and just paste it into your project.

and there is just one node package you need to install.

Secondly, install reactjs-crontab node package

This is node package I created to help reactjs developers easily create crontab. This package works extremely well for our purpose. Without using it, it takes quite a long time to implement and test. Here is the link to reactjs crontab documentation in npm https://www.npmjs.com/package/reactjs-crontab

let’s install reactjs-crontab

npm install reactjs-crontab

Other notable features of reactjs-crontab

• Supports All Timezones
• No extra dependencies except React
• No style library is used to style the components. vanilla css is used.
• Provide specific error message, you will find it so easy to debug.
• Provide Dashboard which enables easy monitoring of your crontab. you can hide this dashboard when needed by props.
• Provide Demo website which helps you to easily set up your crontab https://d180vcwahe2y6s.cloudfront.net/build/index.html

Let’s look at tasks props in the App.js file

As you can see, This is very simple. Functions are just called based on the time config when the time condition is met. Nothing more or less.

This is the API reference to the config field.

MIN HOUR DOM MON DOW

OR

Can be multiple values like this

MIN,MIN HOUR,HOUR DOM,DOM MON,MON DOW,DOW

• MIN represents minute(s), can be 0 through 59 . * means every minute
• HOUR represents hour(s) of a day, can be 0 through 23. * means every hour
• DOM represents day of month, can be 1 through 31. * means every day
• MON represents month, can be 1 through 12. * means every month
• DOW represents day of week, can be 1 through 7. 1 is Monday, 2 is Tuesday and so on. * means every day
• Multiple values must be separated by comma ,

This is timeZone props which supports all timezones

const timeZone = "UTC"
<Crontab timeZone={timeZone} />

Timezone specifies the timezone in which your crontab runs. For instance, if it’s the ‘UTC’ timezone, the crontab will run in the UTC timezone. Similarly, if it’s ‘Asia/Seoul’, it will run in Korea Standard Time.

It might be difficult to understand at first. So let’s just run it and see the result.

npm start

On the screen, you will see the first task runs every minute and the second task runs on December 19th at 10:10 AM.

Congratulations! From now on, you can schedule component, function, or even API call with this module.

Note that Crontab runs only once per minute. The exact second it runs varies from 0 to 59 seconds. Thus, don’t be surprised if it doesn’t run as soon as the time condition met.

If you are still not sure how to use it. Please read the documentation in npm website here https://www.npmjs.com/package/reactjs-crontab.

Or I created a guide website for you to make it so easy to use. you can play around with the crontab configuration here. https://d180vcwahe2y6s.cloudfront.net/build/index.html

If you liked this story. please share and clap :)

Thanks!