{"id":21270438,"url":"https://github.com/dan503/react-time-input-polyfill","last_synced_at":"2025-07-11T05:31:59.399Z","repository":{"id":35152724,"uuid":"213542785","full_name":"Dan503/react-time-input-polyfill","owner":"Dan503","description":"A simple React component that produces an input[type=time] element with a built in Polyfill for Safari and IE support","archived":false,"fork":false,"pushed_at":"2023-06-18T12:14:40.000Z","size":9483,"stargazers_count":3,"open_issues_count":5,"forks_count":10,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-04T08:24:46.056Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dan503.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-10-08T03:40:33.000Z","updated_at":"2022-03-12T13:08:53.000Z","dependencies_parsed_at":"2024-06-20T23:28:07.456Z","dependency_job_id":"f200b52d-d00d-4ce3-8138-017934684c0e","html_url":"https://github.com/Dan503/react-time-input-polyfill","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Freact-time-input-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Freact-time-input-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Freact-time-input-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Freact-time-input-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dan503","download_url":"https://codeload.github.com/Dan503/react-time-input-polyfill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225693742,"owners_count":17509228,"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":"2024-11-21T08:17:26.946Z","updated_at":"2024-11-21T08:17:27.508Z","avatar_url":"https://github.com/Dan503.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @time-input-polyfill/react\n\nThis is a pre-built, plug-and-play, fully accessible React component that will produce an `\u003cinput type=\"time\"\u003e` element with a built in polyfill for IE and Safari support.\n\n-   ✔️ Modeled after the Chrome 78 and Firefox 70 desktop implementations.\n-   ✔️ Fully keyboard and screen reader accessible.\n-   ✔️ Sends back the same values as real time inputs (24 hour time).\n-   ✔️ Only downloads the full polyfill code in the browsers that need it\n-   ✔️ Quality assured with [Cypress](https://www.cypress.io/) tests\n\nYou may have already come across the [plain JavaScript version](https://www.npmjs.com/package/time-input-polyfill). This is not just a wrapper component though. This package was built from the ground up in React, for React.\n\nYou can [view a demo](https://dan503.github.io/react-time-input-polyfill/) of the time input polyfill in action here: https://dan503.github.io/react-time-input-polyfill/\n\nYou can view a demo of the original plain javascript version here: https://dan503.github.io/time-input-polyfill/\n\n## Install\n\nThe component was built to work in [create-react-app](https://create-react-app.dev/docs/getting-started) projects. It should work ok in other React based frameworks though as well.\n\n\u003e **`react-scripts` v5 is currently not supported.**\n\u003e\n\u003e This is related to React upgrading to Webpack v5. [This linked issue](https://github.com/facebook/create-react-app/issues/11865) is blocking my ability to support `react-scripts` v5.\n\nInstall the polyfill component with npm:\n\n```\nnpm i @time-input-polyfill/react\n```\n\nor install via Yarn:\n\n```\nyarn add @time-input-polyfill/react\n```\n\n## Usage\n\n```jsx\n/* TimeInput.js */\n\nimport React from 'react'\n\n// Import the component into your project\nimport { TimeInputPolyfill } from '@time-input-polyfill/react'\n// Note: default import is also supported\n\nexport function TimeInput({ label, value, setValue }) {\n    return (\n        \u003clabel\u003e\n            \u003cspan\u003e{label}\u003c/span\u003e\n            \u003cTimeInputPolyfill\n                // Set the value through props\n                value={value}\n                // Pass in the state setter\n                setValue={setValue}\n            /\u003e\n        \u003c/label\u003e\n    )\n}\n```\n\n```jsx\n/* ExampleForm.js */\n\nimport React, { useState, useEffect } from 'react'\n\n// import your local time input component into your form component\nimport { TimeInput } from './TimeInput'\n\nexport function ExampleForm() {\n    // Use state to keep track of the value\n    const [inputValue, setInputValue] = useState('20:30') // default to 8:30 PM\n\n    // Use useEffect to trigger functionality when the value changes\n    useEffect(() =\u003e {\n        console.log({ inputValue })\n    }, [inputValue])\n\n    return (\n        \u003cform\u003e\n            \u003cTimeInput\n                label=\"Label text\"\n                // Use the state value to set the time\n                value={inputValue}\n                // Pass the state setter function into the component\n                setValue={setInputValue}\n            /\u003e\n            \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n        \u003c/form\u003e\n    )\n}\n```\n\nYou can also force-enable the polyfill so that it is active in modern browsers that support `\u003cinput type=\"time\"\u003e` natively. This is helpful when it comes to debugging since it gives you access to modern dev tools (just make sure to disable it again when you are done).\n\n```jsx\n/* TimeInput.js */\n\nimport React from 'react'\nimport { TimeInputPolyfill } from '@time-input-polyfill/react'\n\nexport function TimeInput({ label, value, setValue }) {\n    return (\n        \u003clabel\u003e\n            \u003cspan\u003e{label}\u003c/span\u003e\n            \u003cTimeInputPolyfill\n                value={value}\n                setValue={setValue}\n                /* Force browsers that support input[type=time]\n                   to use the polyfill.\n                   (useful for testing and debugging) */\n                forcePolyfill={true}\n            /\u003e\n        \u003c/label\u003e\n    )\n}\n```\n\n## Content Security Policy (CSP) work around\n\nThe way that the polyfill avoids downloading the full polyfill code in modern browsers is by injecting the following script tag onto the page:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@time-input-polyfill/utils@1\"\u003e\u003c/script\u003e\n```\n\nThat downloads the extra helper functions that the polyfill needs to function.\n\nYour CSP might not allow for this.\n\nTo work around the issue, first create a `timePolyfillUtils.js` file and ensure that whatever you are using to compile your JS also compiles this file as it's own separate thing. Don't import it into your main js file.\n\n```js\n// timePolyfillUtils.js\n\n// ES5\nrequire('@time-input-polyfill/utils/npm/time-input-polyfill-utils.min.js')\n\n// ES6\nimport '@time-input-polyfill/utils/npm/time-input-polyfill-utils.min.js'\n```\n\nThen when using the component, add a `polyfillSource` prop that points to the compiled helpers file on your server.\n\n```jsx\n\u003cTimeInput\n    value={currentValue}\n    setValue={setCurrentValue}\n    polyfillSource=\"/path/to/timePolyfillUtils.js\"\n/\u003e\n```\n\n## Breaking changes in v2\n\n### `onChange` replaced with `setValue`\n\nIn v1 you updated the value using an `onChange` event. This was really clunky though.\n\n```jsx\n// v1 syntax\n\nconst [value, setValue] = useState()\n\n// ...\n\n\u003cTimeInput value={value} onChange={({ value }) =\u003e {\n    doStuff(value)\n    setValue(value)\n}} /\u003e\n```\n\nIn v2, the syntax has been simplified down to this:\n\n```jsx\n// v2 syntax\n\nconst [value, setValue] = useState()\n\nuseEffect(()=\u003e{\n    doStuff(value)\n}, [value])\n\n// ...\n\n\u003cTimeInput value={value} setValue={setValue} /\u003e\n```\n\nNote: It is still possible to use `onChange`, however this is just an extension of the native `\u003cinput type=\"time\"\u003e` `onChange` event now. It is not compatible with v1 and it does not provide a consistent value between polyfilled and non-polyfilled browsers.\n\n**Warning:** events like `onChange` and `onKeyUp` fire **before** the state in the polyfill has settled. This means that `event.target.currentValue` will **not** return the expected value in the polyfill version. It was out of scope to adjust the timing on every possible event to fire _after_ the state has settled.\n\n### `polyfillSource` value has changed location\n\nIn version 1, you would import the polyfill utils from here:\n\n`react-time-input-polyfill/dist/timePolyfillUtils.js`.\n\nIn version 2, you will need to import from here instead now:\n\n`@time-input-polyfill/utils/npm/time-input-polyfill-utils.min.js`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdan503%2Freact-time-input-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdan503%2Freact-time-input-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdan503%2Freact-time-input-polyfill/lists"}