{"id":25371182,"url":"https://github.com/nucleuscloud/neocron","last_synced_at":"2025-10-30T06:30:55.965Z","repository":{"id":206257006,"uuid":"691327671","full_name":"nucleuscloud/neocron","owner":"nucleuscloud","description":"A modern, lightweight cron scheduling react component styled using tailwind css","archived":false,"fork":false,"pushed_at":"2024-09-05T14:31:17.000Z","size":1672,"stargazers_count":3,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-09-23T01:49:59.588Z","etag":null,"topics":[],"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/nucleuscloud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-09-14T00:46:21.000Z","updated_at":"2024-06-11T07:51:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"a8f06eaf-e90a-4454-b0d4-7a9047cddb5b","html_url":"https://github.com/nucleuscloud/neocron","commit_stats":null,"previous_names":["nucleuscloud/neocron"],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleuscloud%2Fneocron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleuscloud%2Fneocron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleuscloud%2Fneocron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleuscloud%2Fneocron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nucleuscloud","download_url":"https://codeload.github.com/nucleuscloud/neocron/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238937502,"owners_count":19555376,"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":[],"created_at":"2025-02-15T02:32:43.323Z","updated_at":"2025-10-30T06:30:55.537Z","avatar_url":"https://github.com/nucleuscloud.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NeoCron\n\n## Introduction\n\nNeoCron is a modern, lightweight cron scheduling react component that is styled using tailwind. It is influenced and built upon [cron-converter](https://github.com/roccivic/cron-converter) project.\n\n## Installation\n\nMake sure that you have these dependencies in your project:\n1. react (\u003e=18.2.0)\n2. tailwindcss(\u003e=3.3.3)\n\n```bash\nnpm i neocron\n```\n\n\n## Usage\n1. Include the neocron package in your app.tsx folder. We highly recommend enforcing that the component only render client-side to avoid client-server mismatches with times and timezones. You can easily do this by using a combination of state variables and useEffect. Make sure that Neocron renders conditionally as well. \n\n```javascript\n\nimport  Neocron from 'neocron'\nimport 'neocron/dist/src/globals.css'\n\nexport function App() {\n\n    const [isClient, setIsClient] = useState(false);\n\n  useEffect(() =\u003e {\n    // This code runs after mount, indicating we're on the client\n    setIsClient(true);\n  }, []);\n\n  const [value, setValue] = useState('')\n  const defaultCronString = \"* * * * 2,3\"\n\n  return \u003cNeocron cronString={value} setCronString={setValue} defaultCronString={defaultCronString}/\u003e\n}\n```\n2. Import the shadcn components by updating your tailwind.config.js folder and adding in this path `./node_modules/neocron/dist/src/**/*.{js,css}\",` to the content array like so:\n\n```js\nimport type { Config } from \"tailwindcss\";\n\nconst config: Config = {\n  content: [\n    \"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n    \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n    \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n    \"./node_modules/neocron/dist/src/**/*.{js,css}\", //adding this to the file makes the shadcn components work\n  ],\n  theme: {\n    extend: {\n      backgroundImage: {\n        \"gradient-radial\": \"radial-gradient(var(--tw-gradient-stops))\",\n        \"gradient-conic\":\n          \"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))\",\n      },\n    },\n  },\n  plugins: [],\n};\nexport default config;\n```\n## Props\n\n| Prop Name            | Description                                                        |\n|----------------------|--------------------------------------------------------------------|\n| `cronString`         | The prop that will get the selected cron string                    |\n| `setCronString`      | A setter to set the cronString                                     |\n| `defaultCronString`  | A default cron string to start with                            |\n| `disableInput`       | Disable the input and only have drop down selectors                |\n| `disableSelectors`   | Disable the selectors and only have the input                      |\n| `disableExplainerText`| Disables the schedule explainer text                              |\n| `selectorText`       | The text in front of the first selector; can be empty              |\n\n\n## Styling\n\nNeoCron is styled using [Tailwind CSS](https://tailwindcss.com/), [Radix](https://www.radix-ui.com/) and [Shadcn](https://ui.shadcn.com/). Radix is a component library that provides pre-built UI components such as Selects, Buttons, Alerts and many more. Shadcn styles these base Radix components and provides a plug-and-play experience for developers building front-end components.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnucleuscloud%2Fneocron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnucleuscloud%2Fneocron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnucleuscloud%2Fneocron/lists"}