Light-weight crontab for handling repetitive tasks in React js

Light-weight crontab for handling repetitive tasks in React js

reactjs-crontab Light-weight crontab for handling repetitive tasks in React js

reactjs-crontab

Light-weight crontab for handling repetitive tasks in React js

Dashboard Demo

Installation

npm install --save reactjs-crontab

make sure to add date-fns as dev dependencies since this package depending on date-fns

npm install [email protected]^2.0.0 --save-dev

Inspired by

Just updated to 1.4.0

Now it supports multiple config time values

Crontab Config Format

MIN-HOUR-DOM-MON-DOW-TIMEZONE

OR

Can be multiple values like this

MIN,MIN-HOUR,HOUR-DOM,DOM-MON,MON-DOW,DOW-TIMEZONE
  • 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 Tusday and so on. * means every day
  • TIMEZONE represent the timezone that crontab will refer to when it triggers tasks. Unfortunately, We only support 'utc timezone'. But we're working hard to improve this.
  • Each sort of time value(s) must be separated by a hyphen '-'
  • Multiple values must be separated by comma ','

Basic Example

Reactjs-crontab has very similar pattern to Linux Crontab. To learn linux crontab Linux Crontab The difference is that this uses dash between arguments like this *-*-*-*-*-*. Whereas Linux crontab uses white space like this * * * * * *

import React from 'react'
import { BasicCron } from 'reactjs-crontab'
import 'reactjs-crontab/dist/index.css'

const sayHello = () => {
  console.log('Hello')
}

const sayGoobye = () => {
  console.log('Goodbye')
}

const RequestSomething = () => {
  console.log('Api request has been sent')
}

const sendNotification = () => {
  console.log('Send Event Notification')
}

const logUserOut = () => {
  console.log('log user out')
}

// these are the functions which will run according to your settings

const tasks = [
  // just put this array into BasicCron component as a props and it will work like magic!
  {
    fn: sayHello,
    id: '1',
    config: '*-*-*-*-*-utc',
    // Execute every minutes
    name: 'Say Hello',
    description: 'Say Hello on console'
  },
  {
    fn: sayGoobye,
    id: '2',
    config: '5-7-12-11-*-utc',
    // Execute In November on 12th At 7AM and At 5 minute(s)

    name: 'Say Goodbye',
    description: 'Say Goodbye on console'
  },
  {
    fn: RequestSomething,
    id: '3',
    config: '*-15,19-*-11,12-*-4',
    // Execute In November, December At 3PM, 7PM every minute
    name: 'Request Something',
    description: 'Send API'
  },
  {
    fn: sendNotification,
    id: '4',
    config: '10-11-18-7-*-utc',
    // Execute In July on 18th At 11AM and At 10 minute(s)
    name: 'Send Notification',
    description: 'Send Event Notification'
  },
  {
    fn: logUserOut,
    id: '5',
    config: '*-16-*-10-1-utc',
    // Execute In October on Monday At 4PM every minute
    name: 'Log user out'
  }
]

const App = () => {
  // this will display dashboard with scheduled tasks
  return <BasicCron tasks={tasks} />
}

export default App

API

BasicCron Props {
  tasks [
    {
      fn: yourFn, // (required field) type function
      id: '1', // (required field) type string
      config: '*-11-18-10,13-*-utc', // (required field) type string
      name: 'logUserOut', // (optional field) type string
      description: 'Send API' // (optional field) type string
    }
  ]
}

Note

  • This will work well for simple crontab task but I have tons of features that I'd like to add. So stay tuned! Thank you so much for your attention!
  • feel free to open issue. Reactjs-crontab Github repo. Any idea that could improve this package or bug report will be highly appreciated.

Download Details:

Author: shawnscoding

Source Code: https://github.com/shawnscoding/reactjs-crontab

react reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.