https://github.com/dan503/react-time-input-polyfill
A simple React component that produces an input[type=time] element with a built in Polyfill for Safari and IE support
https://github.com/dan503/react-time-input-polyfill
Last synced: 11 months ago
JSON representation
A simple React component that produces an input[type=time] element with a built in Polyfill for Safari and IE support
- Host: GitHub
- URL: https://github.com/dan503/react-time-input-polyfill
- Owner: Dan503
- Created: 2019-10-08T03:40:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-06-18T12:14:40.000Z (almost 3 years ago)
- Last Synced: 2024-11-04T08:24:46.056Z (over 1 year ago)
- Language: TypeScript
- Size: 9.04 MB
- Stars: 3
- Watchers: 1
- Forks: 10
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @time-input-polyfill/react
This is a pre-built, plug-and-play, fully accessible React component that will produce an `` element with a built in polyfill for IE and Safari support.
- ✔️ Modeled after the Chrome 78 and Firefox 70 desktop implementations.
- ✔️ Fully keyboard and screen reader accessible.
- ✔️ Sends back the same values as real time inputs (24 hour time).
- ✔️ Only downloads the full polyfill code in the browsers that need it
- ✔️ Quality assured with [Cypress](https://www.cypress.io/) tests
You 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.
You 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/
You can view a demo of the original plain javascript version here: https://dan503.github.io/time-input-polyfill/
## Install
The 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.
> **`react-scripts` v5 is currently not supported.**
>
> 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.
Install the polyfill component with npm:
```
npm i @time-input-polyfill/react
```
or install via Yarn:
```
yarn add @time-input-polyfill/react
```
## Usage
```jsx
/* TimeInput.js */
import React from 'react'
// Import the component into your project
import { TimeInputPolyfill } from '@time-input-polyfill/react'
// Note: default import is also supported
export function TimeInput({ label, value, setValue }) {
return (
{label}
)
}
```
```jsx
/* ExampleForm.js */
import React, { useState, useEffect } from 'react'
// import your local time input component into your form component
import { TimeInput } from './TimeInput'
export function ExampleForm() {
// Use state to keep track of the value
const [inputValue, setInputValue] = useState('20:30') // default to 8:30 PM
// Use useEffect to trigger functionality when the value changes
useEffect(() => {
console.log({ inputValue })
}, [inputValue])
return (
Submit
)
}
```
You can also force-enable the polyfill so that it is active in modern browsers that support `` 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).
```jsx
/* TimeInput.js */
import React from 'react'
import { TimeInputPolyfill } from '@time-input-polyfill/react'
export function TimeInput({ label, value, setValue }) {
return (
{label}
)
}
```
## Content Security Policy (CSP) work around
The way that the polyfill avoids downloading the full polyfill code in modern browsers is by injecting the following script tag onto the page:
```html
```
That downloads the extra helper functions that the polyfill needs to function.
Your CSP might not allow for this.
To 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.
```js
// timePolyfillUtils.js
// ES5
require('@time-input-polyfill/utils/npm/time-input-polyfill-utils.min.js')
// ES6
import '@time-input-polyfill/utils/npm/time-input-polyfill-utils.min.js'
```
Then when using the component, add a `polyfillSource` prop that points to the compiled helpers file on your server.
```jsx
```
## Breaking changes in v2
### `onChange` replaced with `setValue`
In v1 you updated the value using an `onChange` event. This was really clunky though.
```jsx
// v1 syntax
const [value, setValue] = useState()
// ...
{
doStuff(value)
setValue(value)
}} />
```
In v2, the syntax has been simplified down to this:
```jsx
// v2 syntax
const [value, setValue] = useState()
useEffect(()=>{
doStuff(value)
}, [value])
// ...
```
Note: It is still possible to use `onChange`, however this is just an extension of the native `` `onChange` event now. It is not compatible with v1 and it does not provide a consistent value between polyfilled and non-polyfilled browsers.
**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.
### `polyfillSource` value has changed location
In version 1, you would import the polyfill utils from here:
`react-time-input-polyfill/dist/timePolyfillUtils.js`.
In version 2, you will need to import from here instead now:
`@time-input-polyfill/utils/npm/time-input-polyfill-utils.min.js`