{"id":19102007,"url":"https://github.com/sojinantony01/react-cron-generator","last_synced_at":"2025-12-30T12:59:50.664Z","repository":{"id":34923816,"uuid":"190407165","full_name":"sojinantony01/react-cron-generator","owner":"sojinantony01","description":"Simple react component to generate cron expressions ","archived":false,"fork":false,"pushed_at":"2024-01-05T16:01:14.000Z","size":3031,"stargazers_count":77,"open_issues_count":5,"forks_count":61,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-23T17:17:14.629Z","etag":null,"topics":["cron","cronjob","cronjob-scheduler","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sojinantony01.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-05T14:10:12.000Z","updated_at":"2024-04-30T07:28:43.147Z","dependencies_parsed_at":"2023-10-03T11:41:05.754Z","dependency_job_id":"8a5010a3-6507-449c-81bf-1c67b3246e2a","html_url":"https://github.com/sojinantony01/react-cron-generator","commit_stats":{"total_commits":124,"total_committers":10,"mean_commits":12.4,"dds":0.3790322580645161,"last_synced_commit":"ef2cf44253c1ef56a8cd28237f33ea376cd97faf"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sojinantony01%2Freact-cron-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sojinantony01%2Freact-cron-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sojinantony01%2Freact-cron-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sojinantony01%2Freact-cron-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sojinantony01","download_url":"https://codeload.github.com/sojinantony01/react-cron-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223783206,"owners_count":17201913,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cron","cronjob","cronjob-scheduler","react"],"created_at":"2024-11-09T03:53:36.731Z","updated_at":"2025-12-30T12:59:50.651Z","avatar_url":"https://github.com/sojinantony01.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/sojinantony"],"categories":["react"],"sub_categories":[],"readme":"# 🕐 React Cron Generator\n\n\u003e A powerful, user-friendly React component for building cron expressions with support for both Unix and Quartz formats\n\n[![npm version](https://badge.fury.io/js/react-cron-generator.svg)](https://badge.fury.io/js/react-cron-generator)\n![Downloads](https://img.shields.io/npm/dm/react-cron-generator.svg)\n[![license](https://img.shields.io/npm/l/react-cron-generator.svg)](https://github.com/sojinantony01/react-cron-generator/blob/main/LICENSE)\n![React](https://img.shields.io/badge/React-16.8%2B%20%7C%2017%20%7C%2018%20%7C%2019-blue)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)](https://www.typescriptlang.org/)\n\n## 🎮 [Try it Live!](https://sojinantony01.github.io/react-cron-generator/)\n\n**[Interactive Demo →](https://sojinantony01.github.io/react-cron-generator/)**\n\n## ✨ Features\n\n- 🎯 **Dual Format Support** - Works with both Unix (5 fields) and Quartz (7 fields) cron formats\n- 🔄 **Automatic Conversion** - Seamlessly convert between Unix and Quartz formats\n- ✅ **Built-in Validation** - Comprehensive cron expression validation\n- 🌍 **Internationalization** - Full i18n support with custom translation functions\n- ♿ **Accessible** - WCAG compliant with keyboard navigation and screen reader support\n- 📱 **Responsive** - Mobile-friendly design that works on all devices\n- 🎨 **Customizable** - Easy to style and configure\n- 🔒 **Type Safe** - Full TypeScript support with comprehensive type definitions\n- ⚡ **Performance Optimized** - Memoized computations and efficient re-renders\n- 🛡️ **Error Boundaries** - Graceful error handling built-in\n\n## 📦 Installation\n\n```bash\nnpm install react-cron-generator\n```\n\nor\n\n```bash\nyarn add react-cron-generator\n```\n\n## 🚀 Quick Start\n\n### Basic Usage (Quartz Format)\n\n```jsx\nimport React, { useState } from 'react';\nimport Cron from 'react-cron-generator';\nimport 'react-cron-generator/dist/cron-builder.css';\n\nfunction App() {\n  const [value, setValue] = useState('0 0 00 1/1 * ? *');\n\n  return (\n    \u003cCron\n      onChange={(cronValue, humanReadable) =\u003e {\n        setValue(cronValue);\n        console.log('Cron:', cronValue);\n        console.log('Human:', humanReadable);\n      }}\n      value={value}\n      showResultText={true}\n      showResultCron={true}\n    /\u003e\n  );\n}\n```\n\n### Unix Format\n\n```jsx\nimport React, { useState } from 'react';\nimport Cron from 'react-cron-generator';\nimport 'react-cron-generator/dist/cron-builder.css';\n\nfunction App() {\n  const [value, setValue] = useState('*/5 * * * *');\n\n  return (\n    \u003cCron\n      onChange={(cronValue, humanReadable) =\u003e {\n        setValue(cronValue);\n      }}\n      value={value}\n      showResultText={true}\n      showResultCron={true}\n      isUnix={true}  // Enable Unix format\n    /\u003e\n  );\n}\n```\n\n## 📖 Documentation\n\n### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `value` | `string` | `undefined` | Initial cron expression (Unix: 5 fields, Quartz: 6 or 7 fields) |\n| `onChange` | `(value: string, text: string) =\u003e void` | **Required** | Callback fired when cron value changes. Receives cron expression and human-readable text |\n| `showResultText` | `boolean` | `false` | Display human-readable description below the builder |\n| `showResultCron` | `boolean` | `false` | Display the cron expression below the builder |\n| `isUnix` | `boolean` | `false` | Use Unix format (5 fields) instead of Quartz. **Cannot be used with `use6FieldQuartz`** |\n| `use6FieldQuartz` | `boolean` | `false` | Use 6-field Quartz format instead of 7-field. **Cannot be used with `isUnix`** |\n| `translateFn` | `(key: string) =\u003e string` | `undefined` | Custom translation function for i18n support |\n| `locale` | `string` | `'en'` | Locale for cronstrue (human-readable text) |\n| `options` | `{ headers: HeaderType[] }` | All headers | Customize which tabs are available |\n| `disabled` | `boolean` | `false` | Disable the entire component |\n\n### Format Comparison\n\n| Feature | Unix (5 fields) | Quartz (6 fields) | Quartz (7 fields) |\n|---------|----------------|-------------------|-------------------|\n| **Format** | `minute hour day month day-of-week` | `second minute hour day month day-of-week` | `second minute hour day month day-of-week year` |\n| **Example** | `*/5 * * * *` | `0 */5 * * * ?` | `0 0/5 * * * ? *` |\n| **Day of Week** | 0-6 (Sunday=0) | 1-7 (Sunday=1) or SUN-SAT | 1-7 (Sunday=1) or SUN-SAT |\n| **Special Chars** | `* , - /` | `* , - / ? L W #` | `* , - / ? L W #` |\n| **Used By** | Linux/Unix cron, most cron implementations | Quartz Scheduler (legacy) | Quartz Scheduler, Spring Framework, Java apps |\n\n### 6-Field Quartz Format Support\n\nThe component supports both 6-field and 7-field Quartz formats:\n\n- **6-field format**: `second minute hour day month day-of-week` (e.g., `0 0 12 * * ?`)\n- **7-field format**: `second minute hour day month day-of-week year` (e.g., `0 0 12 * * ? *`)\n\n**Format Behavior:**\n\nThe `use6FieldQuartz` prop controls the output format:\n\n```jsx\n// Default: 7-field Quartz format\n\u003cCron\n  value=\"0 0 12 * * ?\"  // 6-field input\n  onChange={(value) =\u003e {\n    console.log(value);  // \"0 0 12 * * ? *\" - converted to 7-field\n  }}\n  showResultText={true}\n  showResultCron={true}\n/\u003e\n\n// Explicitly use 6-field Quartz format\n\u003cCron\n  value=\"0 0 12 * * ? *\"  // 7-field input\n  onChange={(value) =\u003e {\n    console.log(value);  // \"0 0 12 * * ?\" - converted to 6-field\n  }}\n  showResultText={true}\n  showResultCron={true}\n  use6FieldQuartz={true}  // Enable 6-field format\n/\u003e\n```\n\n**Rules:**\n- **`use6FieldQuartz={false}` (default)**: Always outputs 7-field format, even if 6-field input is provided\n- **`use6FieldQuartz={true}`**: Always outputs 6-field format, even if 7-field input is provided\n- Cannot use both `isUnix={true}` and `use6FieldQuartz={true}` together - this will throw an error\n- Internally, the component always works with 7-field format for processing\n\n## 🔧 Advanced Usage\n\n### Format Conversion\n\n```jsx\nimport { \n  unixToQuartz, \n  quartzToUnix, \n  detectCronFormat \n} from 'react-cron-generator';\n\n// Convert Unix to Quartz\nconst quartzCron = unixToQuartz('*/5 * * * *');\nconsole.log(quartzCron); // '0 */5 * * * ? *'\n\n// Convert Quartz to Unix\nconst unixCron = quartzToUnix('0 0/5 * * * ? *');\nconsole.log(unixCron); // '*/5 * * * *'\n\n// Auto-detect format\nconst format = detectCronFormat('*/5 * * * *');\nconsole.log(format); // 'unix'\n```\n\n### Validation\n\n```jsx\nimport { validateCron } from 'react-cron-generator';\n\n// Validate any format (auto-detects Unix or Quartz)\nconst result = validateCron('*/5 * * * *');\nconsole.log(result);\n// { isValid: true, format: 'unix' }\n\n// Check validation result\nif (result.isValid) {\n  console.log('Valid cron expression!');\n} else {\n  console.error('Invalid:', result.error);\n}\n```\n\n### Custom Tabs\n\n```jsx\nimport Cron, { HEADER } from 'react-cron-generator';\n\nconst options = {\n  headers: [\n    HEADER.MINUTES,\n    HEADER.HOURLY,\n    HEADER.DAILY,\n    HEADER.WEEKLY,\n    HEADER.MONTHLY,\n    HEADER.CUSTOM\n  ]\n};\n\n\u003cCron options={options} {...otherProps} /\u003e\n```\n\n### Internationalization\n\n```jsx\nimport Cron from 'react-cron-generator';\n\nconst translations = {\n  'Every': 'Cada',\n  'minute(s)': 'minuto(s)',\n  // ... more translations\n};\n\nfunction translateFn(key) {\n  return translations[key] || key;\n}\n\n\u003cCron\n  translateFn={translateFn}\n  locale=\"es\"  // For cronstrue\n  {...otherProps}\n/\u003e\n```\n\n\n## 🎨 Styling\n\nThe component comes with default styles. Import the CSS file:\n\n```jsx\nimport 'react-cron-generator/dist/cron-builder.css';\n```\n\nYou can override styles by targeting the CSS classes:\n\n```css\n.cron_builder {\n  /* Your custom styles */\n}\n\n.cron_builder .nav-link {\n  /* Customize tabs */\n}\n\n.cron_builder_bordering {\n  /* Customize content area */\n}\n```\n\n## 📚 API Reference\n\n### Exported Components\n\n- `Cron` - Main cron builder component (default export)\n\n### Exported Utilities\n\n- `unixToQuartz(cron: string): string` - Convert Unix to Quartz format\n- `quartzToUnix(cron: string): string` - Convert Quartz to Unix format\n- `detectCronFormat(cron: string): 'unix' | 'quartz'` - Detect cron format\n- `validateCron(cron: string): ValidationResult` - Validate any cron format (auto-detects Unix or Quartz)\n- `HEADER` - Constants for tab headers\n- `cronstrue` - Human-readable cron descriptions (from cronstrue/i18n)\n\n### Exported Types\n\n- `CronProps` - Props for Cron component\n- `CronFormat` - 'unix' | 'quartz'\n- `CronValidationResult` - Validation result interface\n- `TranslateFn` - Translation function type\n- And many more...\n\n## 🎯 Examples\n\n### Example 1: Every 5 Minutes\n\n**Unix:** `*/5 * * * *`  \n**Quartz:** `0 0/5 * * * ? *`  \n**Human:** \"Every 5 minutes\"\n\n### Example 2: Every Day at 2:30 PM\n\n**Unix:** `30 14 * * *`  \n**Quartz:** `0 30 14 * * ? *`  \n**Human:** \"At 02:30 PM\"\n\n### Example 3: Every Monday at 9:00 AM\n\n**Unix:** `0 9 * * 1`  \n**Quartz:** `0 0 9 ? * MON *`  \n**Human:** \"At 09:00 AM, only on Monday\"\n\n### Example 4: First Day of Every Month\n\n**Unix:** `0 0 1 * *`  \n**Quartz:** `0 0 0 1 * ? *`  \n**Human:** \"At 12:00 AM, on day 1 of the month\"\n\n## 🔍 Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n- Mobile browsers\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📝 License\n\nThis project is licensed under the ISC License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- [cronstrue](https://github.com/bradymholt/cRonstrue) - For human-readable cron descriptions\n- [Viswanath Lekshmanan](https://viswanathl.in/) - Original inspiration\n\n## 👨‍💻 Author\n\n**Sojin Antony**\n\n- GitHub: [@sojinantony01](https://github.com/sojinantony01)\n- Buy me a coffee: [![\"Buy Me A Coffee\"](https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-1.svg)](https://www.buymeacoffee.com/sojinantony)\n\n## 🌟 Show Your Support\n\nGive a ⭐️ if this project helped you!\n\n## 📊 Stats\n\n![npm](https://img.shields.io/npm/dt/react-cron-generator)\n![GitHub stars](https://img.shields.io/github/stars/sojinantony01/react-cron-generator)\n![GitHub issues](https://img.shields.io/github/issues/sojinantony01/react-cron-generator)\n\n## 🔗 Links\n\n- [Live Demo](https://sojinantony01.github.io/react-cron-generator/)\n- [NPM Package](https://www.npmjs.com/package/react-cron-generator)\n- [GitHub Repository](https://github.com/sojinantony01/react-cron-generator)\n- [Issue Tracker](https://github.com/sojinantony01/react-cron-generator/issues)\n\n## 📸 Screenshots\n\n![Cron Generator Interface](https://raw.githubusercontent.com/sojinantony01/react-cron-generator/master/public/images/Screenshot%20from%202019-06-08%2000-31-31.png)\n\n![Cron Generator Options](https://raw.githubusercontent.com/sojinantony01/react-cron-generator/master/public/images/Screenshot%20from%202019-06-08%2000-31-57.png)\n\n---\n\nMade with ❤️ by [Sojin Antony](https://github.com/sojinantony01)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsojinantony01%2Freact-cron-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsojinantony01%2Freact-cron-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsojinantony01%2Freact-cron-generator/lists"}