Light-weight Task Scheduler In Reactjs Based on Linux Crontab

reactjs-crontab

The reactjs-crontab module is very light-weight task scheduler in reactjs based on linux crontab. This module allows you to schedule task in reactjs.

Crontab Syntax Guide at https://d180vcwahe2y6s.cloudfront.net/build/index.html

Crontab Guide Demo

Getting Started

npm install --save reactjs-crontab

Usage 1

This is useful when you need to render component at particular time

import React from 'react'
import Crontab from 'reactjs-crontab'
import 'reactjs-crontab/dist/index.css'

const styles = {
  text: {
    margin: '70px',
    color: 'skyblue'
  }
}

const MorningMsg = () => {
  return <h1 style={styles.text}>Good Morning !</h1>
}

const App = () => {
  const [open, setOpen] = React.useState(null)

  const sayGoodMorning = () => {
    setOpen(true)
  }
  // this is the function which will run according to your settings

  const tasks = [
    {
      fn: sayGoodMorning,
      id: '1',
      config: '*-*-*-*-*',
      // this runs every minutes
      name: '',
      description: ''
    }
  ]

  return (
    <div>
      <Crontab
        tasks={tasks}
        timeZone='local'
        // timezone is PC local timezone.
        dashboard={{
          hidden: false
          // if true, dashboard is hidden
        }}
      />
      {open && <MorningMsg />}
    </div>
  )
}

export default App

Copying and pasting above code will render ‘’ if it’s 08:00 like the screenshot below

usage 2 demo

Usage 2

This is useful when you need to implement some function like api call at particular time.

import React from 'react'
import Crontab from 'reactjs-crontab'
import 'reactjs-crontab/dist/index.css'

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

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

// these are the functions which will run according to the config

const tasks = [
  {
    fn: sayHello,
    id: '1',
    config: '*-*-*-*-*',
    // Execute every minutes
    name: 'Say Hello',
    description: 'Say Hello on console'
  },
  {
    fn: RequestSomething,
    id: '3',
    config: '*-15,19-*-11,12-*',
    // Execute In November, December At 3PM and 7PM every minute
    name: 'Request Something',
    description: 'Send API'
  }
]

const App = () => {
  return (
    <Crontab
      tasks={tasks}
      timeZone='UTC'
      // timezone is UTC timezone.
      dashboard={{
        hidden: false
        // if true, dashboard is hidden
      }}
    />
  )
}
export default App

Copying and pasting above code will result something like this below

Dashboard Demo

This will do what it says at the requested time(s).

Inspired by

Features

  • Supports All Timezones
  • Supports All modern browsers
  • 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
  • Provide Demo website which helps you to easily set up your crontab

Cron Syntax

 # ┌──────────── minute
 # │ ┌────────── hour
 # │ │ ┌──────── day of month
 # │ │ │ ┌────── month
 # │ │ │ │ ┌──── day of week
 # │ │ │ │ │
 # *-*-*-*-*

MIN-HOUR-DOM-MON-DOW

OR

Can be multiple values like this

 # ┌──────────── minute
 # │   ┌────────── hour
 # │   │   ┌──────── day of month
 # │   │   │ ┌────── month
 # │   │   │ │ ┌──── day of week
 # │   │   │ │ │
 # 1,2-6,7-*-*-*

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

Allowed values

field value
minute 0-59
hour 0-23
day of month 1-31
month 1-12
day of week 1-7 (7 is sunday)

API

Crontab Props {
  tasks: [
    {
      fn: yourFn,
      id: '1',
      config: '*-11-18-10,13-*',
      name: 'logUserOut',
      description: 'Send API'
    }
  ],
  timeZone: "UTC", "local" or "YOUR PREFERRED TIMEZONE",
  // supported timezone list here
  // https://github.com/shawnscoding/reactjs-crontab/blob/master/TIMEZONES.md
  dashboard: {
    hidden: false
    // if true, dashboard is hidden
  }
}

Crontab.propTypes = {
  tasks: PropTypes.arrayOf(
    PropTypes.shape({
      fn: PropTypes.func.isRequired,
      id: PropTypes.string.isRequired,
      config: PropTypes.string.isRequired,
      name: PropTypes.string,
      description: PropTypes.string
    })
  ),
  dashboard: PropTypes.shape({
    hidden: PropTypes.bool.isRequired
  }),
  timeZone: PropTypes.string.isRequired
}

Crontab.defaultProps = {
  tasks: [],
  dashboard: {
    hidden: false
  },
  timeZone: 'UTC'
}

Important note

  • Note that Crontab is triggered only once per minute. The seconds that is triggered is different everytime you run your reactjs app. It varies from 0s to 59s. This is because we don’t configure seconds. Thus, don’t be surprised if it doesn’t run as soon as the time condition met.

Breaking Changes in 3.0.0

  • Named import as <BasicCron /> is deprecated. use default import as <Crontab /> to use crontab

tutorial

Supported browsers

We use browserslist config to state the browser support for this lib, so check it out on browserslist.dev.

Supported Timezones

supported timezone list here

Note

  • feel free to open issue. Reactjs-crontab Github repo. Any idea that could improve this package or bug report will be highly appreciated.
  • We’ll highly appreciate it if you promote this package to other devs in any way. We believe the appropriate usage of this package will save loads of thier time.

Download Details:

Author: shawnscoding

Demo: https://d180vcwahe2y6s.cloudfront.net/index.html

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

#react #reactjs #javascript

What is GEEK

Buddha Community

Light-weight Task Scheduler In Reactjs Based on Linux Crontab

Light-weight Task Scheduler In Reactjs Based on Linux Crontab

reactjs-crontab

The reactjs-crontab module is very light-weight task scheduler in reactjs based on linux crontab. This module allows you to schedule task in reactjs.

Crontab Syntax Guide at https://d180vcwahe2y6s.cloudfront.net/build/index.html

Crontab Guide Demo

Getting Started

npm install --save reactjs-crontab

Usage 1

This is useful when you need to render component at particular time

import React from 'react'
import Crontab from 'reactjs-crontab'
import 'reactjs-crontab/dist/index.css'

const styles = {
  text: {
    margin: '70px',
    color: 'skyblue'
  }
}

const MorningMsg = () => {
  return <h1 style={styles.text}>Good Morning !</h1>
}

const App = () => {
  const [open, setOpen] = React.useState(null)

  const sayGoodMorning = () => {
    setOpen(true)
  }
  // this is the function which will run according to your settings

  const tasks = [
    {
      fn: sayGoodMorning,
      id: '1',
      config: '*-*-*-*-*',
      // this runs every minutes
      name: '',
      description: ''
    }
  ]

  return (
    <div>
      <Crontab
        tasks={tasks}
        timeZone='local'
        // timezone is PC local timezone.
        dashboard={{
          hidden: false
          // if true, dashboard is hidden
        }}
      />
      {open && <MorningMsg />}
    </div>
  )
}

export default App

Copying and pasting above code will render ‘’ if it’s 08:00 like the screenshot below

usage 2 demo

Usage 2

This is useful when you need to implement some function like api call at particular time.

import React from 'react'
import Crontab from 'reactjs-crontab'
import 'reactjs-crontab/dist/index.css'

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

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

// these are the functions which will run according to the config

const tasks = [
  {
    fn: sayHello,
    id: '1',
    config: '*-*-*-*-*',
    // Execute every minutes
    name: 'Say Hello',
    description: 'Say Hello on console'
  },
  {
    fn: RequestSomething,
    id: '3',
    config: '*-15,19-*-11,12-*',
    // Execute In November, December At 3PM and 7PM every minute
    name: 'Request Something',
    description: 'Send API'
  }
]

const App = () => {
  return (
    <Crontab
      tasks={tasks}
      timeZone='UTC'
      // timezone is UTC timezone.
      dashboard={{
        hidden: false
        // if true, dashboard is hidden
      }}
    />
  )
}
export default App

Copying and pasting above code will result something like this below

Dashboard Demo

This will do what it says at the requested time(s).

Inspired by

Features

  • Supports All Timezones
  • Supports All modern browsers
  • 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
  • Provide Demo website which helps you to easily set up your crontab

Cron Syntax

 # ┌──────────── minute
 # │ ┌────────── hour
 # │ │ ┌──────── day of month
 # │ │ │ ┌────── month
 # │ │ │ │ ┌──── day of week
 # │ │ │ │ │
 # *-*-*-*-*

MIN-HOUR-DOM-MON-DOW

OR

Can be multiple values like this

 # ┌──────────── minute
 # │   ┌────────── hour
 # │   │   ┌──────── day of month
 # │   │   │ ┌────── month
 # │   │   │ │ ┌──── day of week
 # │   │   │ │ │
 # 1,2-6,7-*-*-*

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

Allowed values

field value
minute 0-59
hour 0-23
day of month 1-31
month 1-12
day of week 1-7 (7 is sunday)

API

Crontab Props {
  tasks: [
    {
      fn: yourFn,
      id: '1',
      config: '*-11-18-10,13-*',
      name: 'logUserOut',
      description: 'Send API'
    }
  ],
  timeZone: "UTC", "local" or "YOUR PREFERRED TIMEZONE",
  // supported timezone list here
  // https://github.com/shawnscoding/reactjs-crontab/blob/master/TIMEZONES.md
  dashboard: {
    hidden: false
    // if true, dashboard is hidden
  }
}

Crontab.propTypes = {
  tasks: PropTypes.arrayOf(
    PropTypes.shape({
      fn: PropTypes.func.isRequired,
      id: PropTypes.string.isRequired,
      config: PropTypes.string.isRequired,
      name: PropTypes.string,
      description: PropTypes.string
    })
  ),
  dashboard: PropTypes.shape({
    hidden: PropTypes.bool.isRequired
  }),
  timeZone: PropTypes.string.isRequired
}

Crontab.defaultProps = {
  tasks: [],
  dashboard: {
    hidden: false
  },
  timeZone: 'UTC'
}

Important note

  • Note that Crontab is triggered only once per minute. The seconds that is triggered is different everytime you run your reactjs app. It varies from 0s to 59s. This is because we don’t configure seconds. Thus, don’t be surprised if it doesn’t run as soon as the time condition met.

Breaking Changes in 3.0.0

  • Named import as <BasicCron /> is deprecated. use default import as <Crontab /> to use crontab

tutorial

Supported browsers

We use browserslist config to state the browser support for this lib, so check it out on browserslist.dev.

Supported Timezones

supported timezone list here

Note

  • feel free to open issue. Reactjs-crontab Github repo. Any idea that could improve this package or bug report will be highly appreciated.
  • We’ll highly appreciate it if you promote this package to other devs in any way. We believe the appropriate usage of this package will save loads of thier time.

Download Details:

Author: shawnscoding

Demo: https://d180vcwahe2y6s.cloudfront.net/index.html

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

#react #reactjs #javascript

Hire Dedicated Linux Developer

Looking to develop real-time applications?

Hire Dedicated Linux Developer from HourlyDeveloper.io, we have dedicated developers who have vast experience in developing applications for Linux and UNIX operating systems and have in-depth knowledge of their processes, kernel tools, internal architectures, and development packages.

Consult with experts:- https://bit.ly/2ZQ5ySP

#hire linux dedicated developer #linux developer #linux development company #linux development services #linux development #linux developer

How I Switched from Windows 10 to Linux Mint

This article is all about my journey on switching from Windows 10 to Linux Mint 20, how I got easily adapted to the Linux environment, and some resources that helped me to set up a perfect Desktop environment.

Uncertainty

Ok, now I have decided to switch to Linux but here comes the first question. Which distro will satisfy my needs both in terms of GUI and other aspects? Linux is not something new to me since I have been working with RHEL based distros in my work for the past 4 years with the command-line.

I know RHEL based distros are good for enterprises but not for personalized desktop environments, at least that’s what I am thinking till now. So I started my research to find the distro that should be easy for me to use and at the same time should have good community support if in case I ran into some problem. Among many Linux distros, I drilled down my list to 4 flavors.

Related ArticleThe Best Linux Distributions for Beginners

Before deciding the Distro it is necessary you formulate the list of tools/programs or packages needed and check if the distro you choose provides all those features.

For me, I use Linux for two main purposes: one is for my professional development work, writing articles, and second for my personal use like Video editing and Movies. Most of the popular software are created to be compatible with Windows, macOS, and Linux like Sublime TextVSCodeVLC Media PlayerFirefox/Chromium browser. Other than these software, cloud-based services make our life easy Like Microsoft Office 365 or G Suite.

#linux distros #linux mint #linux distros #linux mint tips #linux

Tyshawn  Braun

Tyshawn Braun

1599742800

10 Best Ubuntu-based Linux Distributions

Ubuntu is arguably one of the most popular and widely-used Linux distribution owing to its classic UI, stability, user-friendliness, and a rich repository that contains over 50,000 software packages. Furthermore, it comes highly recommended for beginners who are trying to give a shot at Linux.

In addition, Ubuntu is supported by a vast community of dedicated opensource developers who actively maintain contribute to its development to deliver up-to-date software packages, updates, and bug-fixes.

There are numerous flavors based on Ubuntu, and a common misconception is that they are all the same. While they may be based on Ubuntu, each flavor ships with its own unique style and variations to make it stand out from the rest.

In this guide, we are going to explore some of the most popular Ubuntu-based Linux variants.

1. Linux Mint

Used by millions around the globe, Linux Mint is a massively popular Linux flavor based off of Ubuntu. It provides a sleek UI with out-of-the-box applications for everyday use such as LibreOffice suite, Firefox, Pidgin, Thunderbird, and multimedia apps such as VLC and Audacious media players.

Linux Mint Desktop

Linux Mint Desktop

Owing to its simplicity and ease-of-use, Mint is considered ideal for beginners who are making a transition from Windows to Linux and those who prefer to steer clear from the default GNOME desktop but still enjoy the stability and the same code base that Ubuntu provides.

The latest Mint release is Linux Mint 20 and is based on the Ubuntu 20.04 LTS.

#linux distros #ubuntu #linux distros #ubuntu linux distributions #linux

I am Developer

1620616862

How to Delete Directories and Files in Linux using Command Line

In this remove or delete directories and files linux tutorial guide, you will learn how to remove empty directory and non empty directory linux using command line. And as well as how to remove/file files linux using command line.

If you work with Linux then you will need the following:

  • how to remove empty directory in linux,
  • how to remove non empty directory,
  • how to remove directory without confirmation linux
  • how to remove files with and without confirmation in linux.

So, this tutorial guide will show you you how to use the rmunlink, and rmdir commands to remove or delete files and directories in Linux with and without confirmation.

https://www.tutsmake.com/how-to-remove-directories-and-files-using-linux-command-line/

#how to delete directory in linux #how to remove non empty directory in linux #remove all files in a directory linux #linux delete all files in current directory #linux delete all files in a directory recursively #delete all files in a directory linux