material-ui-cron

Material UI Cron

A React cron editor built with material ui

Live demo and usage at https://baymac.github.io/material-ui-cron/

Inspired by

• react-cron-js

Installation

Be sure that you have these dependencies on your project:

• react (>=18.0.0)
• @mui/material (>=5.15.0)
• @emotion/react (>=11.11.0)
• @emotion/styled (>=11.11.0)

More dependencies

# Yarn
yarn add material-ui-cron

# NPM
npm install --save material-ui-cron

Usage

import Scheduler from 'material-ui-cron'
import React from 'react'

export default function SchedulerDemo() {
  const [cronExp, setCronExp] = React.useState('0 0 * * *')
  const [cronError, setCronError] = React.useState('') // get error message if cron is invalid
  const [isAdmin, setIsAdmin] = React.useState(true) // set admin or non-admin to enable or disable high frequency scheduling (more than once a day)

  return (
    <Scheduler
      cron={cronExp}
      setCron={setCronExp}
      setCronError={setCronError}
      isAdmin={isAdmin}
    />
  )
}

TypeScript

material-ui-cron is written in TypeScript with complete definitions.

Internalization and Localization

This library supports Internalization (i18n). Currently languages supported are:

• English

We are welcoming translation contributions from the community.

How to contribute to translation

• Clone /src/localization/enLocal.ts and rename it to desired langauge prefix (based on https://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code).

• Add language prefix to definedLocales type inside /src/types.ts

• Add locale mapping inside /src/i18n.ts

How to use translation

Using predefined locale:

<Scheduler
  cron={cronExp}
  setCron={setCronExp}
  setCronError={setCronError}
  isAdmin={isAdmin}
  locale={'en'} // if not supplied, localization defaults to en
/>

Using custom locale:

<Scheduler
  cron={cronExp}
  setCron={setCronExp}
  setCronError={setCronError}
  isAdmin={isAdmin}
  customLocale={{...your translations}} // should be a valid object of type Locale, overrides value supplied to locale prop
/>

Acknowledgement

This library was developed as a part of Udaan's Data Platform for scheduling queries. Big thanks to Amod Malviya for supporting this project.

License

MIT © baymac