react-js-cron

react-js-cron is a React component that provides a friendly, dropdown-based UI for building and editing cron expressions. Instead of hand-writing crontab syntax, users pick periods, months, days, hours, and minutes through Ant Design select fields, and the component keeps a valid cron string in sync.

It is fully controlled and customizable, supporting different periods, locales, humanized output, custom styling, and two-way binding so you can drive it from and read back a standard cron expression. It pairs naturally with a cron parser to schedule jobs from user input.

What You Get

• A ready-made React cron editor component built with Ant Design
• Controlled value/setValue binding to a standard cron expression string
• Configurable periods, clear buttons, and humanized labels
• Localization support for multiple languages
• Customizable styling, class names, and allowed/disabled options

Common Use Cases

• Letting users configure recurring job schedules in an admin UI
• Building a visual editor for cron-based automations and reminders
• Editing existing cron expressions loaded from a backend
• Providing a friendly alternative to raw crontab syntax in dashboards

Under The Hood

Architecture - The public entry is src/Cron.tsx, a controlled React component that composes per-unit field components from src/fields/ and src/components/. A converter.ts translates between the internal field selections and a crontab string, while constants.ts, locale.ts, and utils.ts supply period definitions, translations, and helpers. State flows through value/setValue props so the cron expression stays the single source of truth.

Tech Stack - Written in TypeScript for React, using Ant Design select components as the UI layer (a peer dependency). It is built with tsdown, tested with Vitest, and includes Storybook stories; release automation uses release-please.

Code Quality - The codebase is typed end to end and includes a tests/ directory with Vitest configuration and setup, codecov integration, and Storybook stories, indicating reasonable coverage and documentation despite low recent commit activity.

API Design - The component API is compact and idiomatic React: a controlled value plus setValue, with optional props for locale, humanized labels, allowed periods, and styling. Sensible defaults let you drop it in with minimal configuration while leaving room for deep customization.