# react-recurring-job

> A simple react component for scheduling recurring jobs

Latest version **1.0.22** (published 2023-02-15) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-recurring-job
pnpm add react-recurring-job
yarn add react-recurring-job
bun add react-recurring-job
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.22 |
| Published | 2023-02-15 |
| First published | 2023-02-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Qubryx |
| Maintainers | fahimasharaf |
| Keywords | React recurring job, React reoccurring job, cron generator, schedule cron job, cron, cron builder, reoccurring job, React recurring, React reoccurring, React scheduler, React cron, scheduler |

## Links

- npm: https://www.npmjs.com/package/react-recurring-job
- Repository: https://github.com/fahimkk/react-recurring-job
- Homepage: https://github.com/fahimkk/react-recurring-job#readme
- Issues: https://github.com/fahimkk/react-recurring-job/issues
- npm.io page: https://npm.io/package/react-recurring-job

## Alternatives

- [cron](https://npm.io/package/cron.md) — 4.9M weekly downloads
- [@vercel/queue](https://npm.io/package/@vercel/queue.md) — 731.6K weekly downloads
- [create-sonicjs](https://npm.io/package/create-sonicjs.md) — 1.6K weekly downloads
- [@exellix/jobs-api](https://npm.io/package/@exellix/jobs-api.md) — 941 weekly downloads
- [@forwardimpact/libskill](https://npm.io/package/@forwardimpact/libskill.md) — 575 weekly downloads

## Recent versions

- 1.0.22 (latest) — 2023-02-15
- 0.0.22 — 2023-02-15
- 0.0.17 — 2023-02-15
- 0.0.16 — 2023-02-15
- 0.0.14 — 2023-02-15
- 0.0.13 — 2023-02-15
- 1.0.11 — 2023-02-10
- 1.0.10 — 2023-02-10
- 1.0.9 — 2023-02-09
- 1.0.8 — 2023-02-08
- 1.0.7 — 2023-02-08
- 1.0.6 — 2023-02-08
- 1.0.5 — 2023-02-08
- 1.0.4 — 2023-02-08
- 1.0.3 — 2023-02-08
- … 3 more at https://npm.io/package/react-recurring-job/versions

## README

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

## Getting Started
```shell
npm install react-recurring-job
```

or 

if you are installing from github package registry
```shell
npm install @fahimkk/react-recurring-job
```

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.
```npmrc
  @fahimkk:registry=https://npm.pkg.github.com/fahimkk
```

## Demo
[Live Demo](https://fahimkk.github.io/react-recurring-job-demo/)

![Image](https://github.com/fahimkk/react-recurring-job/blob/main/src/assets/weekly.png)
![Image](https://github.com/fahimkk/react-recurring-job/blob/main/src/assets/monthly.png)

## Usage

```javascript
import Recurrence from 'react-recurring-job';

function App() {
  return (
    <Recurrence
      showFrequency
      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 |
| showFrequency | boolean | true | Show frequency selection box | 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 | string | '' | Cron Expression of the recurring event to set the fied values for editing  | No |



```javascript
import Recurrence from 'react-recurring-job';

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  |



```javascript

import Recurrence from 'react-recurring-job';

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](https://github.com/fahimkk/react-recurring-job/blob/main/src/assets/weeklyStyled.png)


## License
React Recurring Job is open-sourced software licensed under the MIT license.

---
_Source: https://npm.io/package/react-recurring-job · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._