npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-cron-schedule-typescript

v3.0.4

Published

A simple react component for creating cron expression

Downloads

16

Readme

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

| Names | Type | Default | Description | Mandatory | | ------ | -------------- |---------|-------------| --------- | | value| object | |Fileds in onChange function prop, can use to edit or set default values | No | | disabled | boolean | false | Disable all fields | No | | showCronExpression | boolean | false | Show cron expression of recurring event at the bottom | No | | onChange | function | | Have single object argument, which contains user selected settings | No | | styles | object | | React style object | No |

value props

value prop can be used to pass default values

| Names | Type | Default | Description | Mandatory | | ------ | -------------- |---------|-------------| --------- | | startDate| Date/String | new Date()|The starting date of the recurring event| No | | endDate| Date/String | null |The ending date of the recurring event | No | | repeat| String | 'weekly' |The repeating of the reoccurring event. Possible values: "weekly", "monthly". | No | | frequency| Number | 1 | The interval between each recurrence. | No | | selectedEndType | String | 'noend' | The end type of the recurring event. Possible values: "noend", "date", "count" | No | | endCount | Number | 10 | The end count of the recurring event | No | | cronExpression | Array of Strings | [] | Cron Expression of the recurring event to set the fied values for editing | No | | showOnlyBottomBorder | Boolean | false | Show only bottom border for all the box components | false | | repeatFor | Number | undefined | The number of occurrence after the interval | false | | repeatForType | String | 'days' | The type of occurrence after the interval, possible values: "days", "workingDays", "weeks" | false | | isFullWeek | Boolean | false | To occure an event on the full week | false |

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 name | Description | | ------ | -------------- | | root | styles applied to root element | | frequencyContainer | styles applied to components in frequency row | | repeatLabel | styles applied to 'Repeat' text | | repeatDropdown | styles applied to repeat selection dropdown | | selectedRepeatLabel | styles applied to selected repeat label. Eg: 'week(s)' | | frequencyInput | styles applied to frequency number input | | weekContainer | styles applied to components in week selection row | | weekdayBtnContainer | styles applied to weekday button container | | weekdayBtn | styles applied to weekday button | | selectedWeekdayBtn | styles applied to selected weekday button | | weekdayFullTextLabel | styles applied to weekday full text in mobile view checkbox | | selectedWeekdayFullTextLabel | styles applied to selected weekday full text in mobile view checkbox | | monthContainer | styles applied to components in month selection row | | onLabel | styles applied to 'On' text | | dayLabel | styles applied to 'day' text | | orLabel | styles applied to 'or' text | | dayDropdown | styles applied to day selection dropdown in month. Eg: 1 - 31 | | orderDropdown | styles applied to order selection dropdown in month: 'First', 'Second', etc | | monthWeekdayDropdown | styles applied to weekday selection dropdown in month: 'Monday', 'Day', etc | | dateContainer | styles applied to components in date selection row | | startLabel | styles applied to 'Start' text | | endLabel | styles applied to 'End' text | | startDate | styles applied to start date picker | | endDate | styles applied to end date picker | | endType | styles applied to end type selection dropdown. Eg: 'date', 'count', etc | | endCount | styles applied to end count number input | | recurrenceText | styles applied to recurrenct text | | cronExpression | styles 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.