Skip to content

baymac/material-ui-cron

Repository files navigation

Material UI Cron

npm package MIT License Badge

A React cron editor built with material ui

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

material-ui-cron demo

Inspired by

Installation

Be sure that you have these dependencies on your project:

  • react (>=17.0.1)
  • @material-ui/core (>5.0.0-beta.1)
  • @material-ui/styles: (>5.0.0-beta.1)

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:

  1. English

We are welcoming translation contributions from the community.

How to contribute to translation

  1. 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).

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

  3. 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