🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

react-cron-schedule-typescript

Package Overview
Dependencies
Maintainers
0
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-cron-schedule-typescript

A simple react component for creating cron expression

3.0.4
latest
Source
npm
Version published
Weekly downloads
1
Maintainers
0
Weekly downloads
 
Created
Source

npm version

React Cron Schedule

A simple and lightweight library for scheduling recurring events in React.

Getting Started

npm install react-cron-schedule-typescript

or

if you are installing from github package registry

npm install @gdev2018/react-cron-schedule-typescript

If the library is not working as expected (Only for the user installed by github package registry), you may need to add the following line to your .npmrc file.

  @gdev2018:registry=https://npm.pkg.github.com/gdev2018

Demo

Live Demo

Image Image

Usage

import { Recurrence } from 'react-cron-schedule-typescript';

function App() {
  return (
    <Recurrence
      onChange={(value) => console.log(value) }
    />
  );
}


export default App;

Props

NamesTypeDefaultDescriptionMandatory
valueobjectFileds in onChange function prop, can use to edit or set default valuesNo
disabledbooleanfalseDisable all fieldsNo
showCronExpressionbooleanfalseShow cron expression of recurring event at the bottomNo
onChangefunctionHave single object argument, which contains user selected settingsNo
stylesobjectReact style objectNo

value props

value prop can be used to pass default values

NamesTypeDefaultDescriptionMandatory
startDateDate/Stringnew Date()The starting date of the recurring eventNo
endDateDate/StringnullThe ending date of the recurring eventNo
repeatString'weekly'The repeating of the reoccurring event. Possible values: "weekly", "monthly".No
frequencyNumber1The interval between each recurrence.No
selectedEndTypeString'noend'The end type of the recurring event. Possible values: "noend", "date", "count"No
endCountNumber10The end count of the recurring eventNo
cronExpressionArray of Strings[]Cron Expression of the recurring event to set the fied values for editingNo
showOnlyBottomBorderBooleanfalseShow only bottom border for all the box componentsfalse
repeatForNumberundefinedThe number of occurrence after the intervalfalse
repeatForTypeString'days'The type of occurrence after the interval, possible values: "days", "workingDays", "weeks"false
isFullWeekBooleanfalseTo occure an event on the full weekfalse



import { Recurrence } from 'react-cron-schedule-typescript';

function App() {
  return (
    <Recurrence
      value = {
        startDate: {new Date()},
        endDate: {new Date(2030, 11, 31)},
        repeat:"weekly"
      }
    />
  );
}


export default App;

CSS

Rule nameDescription
rootstyles applied to root element
frequencyContainerstyles applied to components in frequency row
repeatLabelstyles applied to 'Repeat' text
repeatDropdownstyles applied to repeat selection dropdown
selectedRepeatLabelstyles applied to selected repeat label. Eg: 'week(s)'
frequencyInputstyles applied to frequency number input
weekContainerstyles applied to components in week selection row
weekdayBtnContainerstyles applied to weekday button container
weekdayBtnstyles applied to weekday button
selectedWeekdayBtnstyles applied to selected weekday button
weekdayFullTextLabelstyles applied to weekday full text in mobile view checkbox
selectedWeekdayFullTextLabelstyles applied to selected weekday full text in mobile view checkbox
monthContainerstyles applied to components in month selection row
onLabelstyles applied to 'On' text
dayLabelstyles applied to 'day' text
orLabelstyles applied to 'or' text
dayDropdownstyles applied to day selection dropdown in month. Eg: 1 - 31
orderDropdownstyles applied to order selection dropdown in month: 'First', 'Second', etc
monthWeekdayDropdownstyles applied to weekday selection dropdown in month: 'Monday', 'Day', etc
dateContainerstyles applied to components in date selection row
startLabelstyles applied to 'Start' text
endLabelstyles applied to 'End' text
startDatestyles applied to start date picker
endDatestyles applied to end date picker
endTypestyles applied to end type selection dropdown. Eg: 'date', 'count', etc
endCountstyles applied to end count number input
recurrenceTextstyles applied to recurrenct text
cronExpressionstyles applied to cronExpression text




import { Recurrence } from 'react-cron-schedule-typescript';

function App() {
  return (
    <Recurrence
      repeat="weekly"
      styles= {
        repeatDropdown: {
          border: '0px',
          borderBottom: '1px solid',
          paddingBottom: 3
        },
        frequencyInput: {
          border: '0px',
          borderBottom: '1px solid',
          paddingBottom: 3
        },
        weekContainer:{
          marginBottom: 20,
          marginTop: 15
        },
        selectedWeekdayBtn: {
          backgroundColor: 'green'
        },
        dateContainer:{
          marginBottom: 30
        },
        startDate: {
          border: '0px',
          borderBottom: '1px solid',
          paddingBottom: 3
        },
        endDate: {
          border: '0px',
          borderBottom: '1px solid',
          paddingBottom: 3
        },
        endType: {
          border: '0px',
          borderBottom: '1px solid',
          paddingBottom: 3
        },
        recurrenceText: {
          color: 'orange'
        },
      }
    />
  );
}

export default App;

Image

License

React Recurring Job is open-sourced library licensed under the Apache license.

Keywords

React cron schedule

FAQs

Package last updated on 08 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts