custom-react-cron

Simple customizable react component to generate cron expression

Getting Started

Package helps to build linux customized scheduler cron expression. Make sure you have include bootstrap in your project

data = '* * * * * * *'

npm install custom-react-cron

demo

Live demo

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


class App extends Component {

  constructor(props) {
      super(props);
      this.state = {
       
      };
      this.cronStyle = `
        .cron_builder {
          width: 90%;
        }

        .cron_builder_bordering {
          text-align: left;
        }

        .nav-tabs {
          border-bottom: 1px solid #ddd;
        }

        .tab-content>.active {
          display: block;
        }

        .row {
          margin-right: -15px;
          margin-left: -15px;
        }
      `
  }

  render() {
    return (<div>
      <CustomCron
        onChange={(e)=> {this.setState({value:e}); console.log(e)}}
        value={this.state.value}
        tabs={['Daily','Weekly', 'Monthly']}
        hours={2}
        minutes={15}
        style={this.cronStyle}
        showResultText={true}
        showResultCron={true}
        />
                            
    </div>)
  }
}

export default App;

props

| Prop | Description | Default | --- | --- | -- | | value | cron expression | | | onChange | | | | tabs | set tabs list | ['Once', 'Minutes','Hourly','Daily','Weekly', 'Monthly'] | | style | change style use existing classes: cron_builder, cron_builder_bordering, nav, nav-tabs, row, well, tab-content, active, col-md-6, col-sm-6 | | | hours | set hours leaps | 1 | | minutes | set minutes leaps | 1 | | showResultText | show in readable text format | false | | showResultCron | show cron expression | false |

Acknowledgments

*cronstrue *viswanath lakshmanan