Simple react component to generate cron expression

Package helps to build linux scheduler cron expression.

Make sure you have include bootstrap(4.x) in your project.

For old bootstrap(3.x) version support, please use cron generator version "1.2.12"

data = '* * * * * * *'

npm install react-cron-generator

Live demo

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


class App extends Component {

  constructor(props) {
      super(props);
      this.state = {
       
      };
  }

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

export default App;

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.headers

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

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

Added ref to the component now you can access state and functions using ref.

add the new prop onRef={ref => (this.cronGen = ref)}

      <Cron
        onRef={ref => (this.cronGen = ref)}  
        onChange={(e)=> {this.setState({value:e}); console.log(e)}}
        value={this.state.value}
        showResultText={true}
        showResultCron={true}
        />

Sojin Antony

cronstrue

Viswanath Lekshmanan