react-cron-generator

Simple react component to generate cron expression

Getting Started

Package helps to build linux scheduler cron expression.

E2E tests passing.

data = '* * * * * * *'

npm install react-cron-generator

demo

Live demo

import React, { useState } from 'react'
import Cron from 'react-cron-generator'
import 'react-cron-generator/dist/cron-builder.css'


const App = () => {
  const [state, setState] = useState<State>({});

  return (
    <Cron
      onChange={(e, text) => {
        setState({ value: e });
      }}
      value={state.value}
      showResultText={true}
      showResultCron={true}
    />
  );
};

export default App;

props

Prop	Description	Default	Mandatory
value	cron expression		No
onChange	have 2 arguments, 1st is cron value and 2nd is cron result text from cronstrue		Yes
showResultText	show in readable text format	false	No
showResultCron	show cron expression	false	No
translateFn	translate function callback	method	No
locale	locale for cronstrue	en	No
options	Options for Cron component, *Must pass a valid cron value for available headers	All available headers	No
disabled	Disable cron selector	false	No

translateFn

Expects a method. Use this prop for localization support. react-cron-generator will call this method for every key. List of keys are available here

locale option should be set for correct ResultText translation. Please visit cronstrue for supported locales.

Options

options.headers

import { HEADER } from 'react-cron-generator';

const options = {
  headers: [HEADER.MONTHLY, HEADER.WEEKLY, HEADER.MINUTES, HEADER.HOURLY, HEADER.DAILY, HEADER.CUSTOM]
};

Release notes 2.x.x

1. Build Procedure updated
2. Updated to latest react(18)
3. Migrated to hooks and typescript

Sojin Antony

Acknowledgments

cronstrue

Viswanath Lekshmanan