# @time-input-polyfill/react

> A pre-built, plug-and-play, fully accessible React component that will produce an `input[type='time']` element with a built in polyfill for IE and Safari support.

Latest version **2.0.2** (published 2022-03-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @time-input-polyfill/react
pnpm add @time-input-polyfill/react
yarn add @time-input-polyfill/react
bun add @time-input-polyfill/react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2022-03-05 |
| First published | 2021-10-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Daniel Tonon |
| Maintainers | dan503 |
| Keywords | React, time, input, polyfill, IE, accessible, accessibility, a11y |

## Links

- npm: https://www.npmjs.com/package/@time-input-polyfill/react
- Repository: https://github.com/Dan503/react-time-input-polyfill
- Homepage: https://dan503.github.io/react-time-input-polyfill/
- Issues: https://github.com/Dan503/react-time-input-polyfill/issues
- npm.io page: https://npm.io/package/@time-input-polyfill/react

## Dependencies (2)

- [@dan503/load-js](https://npm.io/package/@dan503/load-js.md) ^1.0.7
- [@time-input-polyfill/utils](https://npm.io/package/@time-input-polyfill/utils.md) ^1.0.4

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.2 (latest) — 2022-03-05
- 2.0.3-beta.0 (beta) — 2023-06-18
- 2.0.2-beta.0 — 2022-03-05
- 2.0.1 — 2021-11-28
- 2.0.0 — 2021-11-09
- 2.0.0-beta.3 — 2021-11-09
- 2.0.0-beta.2 — 2021-11-01
- 2.0.0-beta.1 — 2021-10-30
- 2.0.0-beta.0 — 2021-10-29

## README

# @time-input-polyfill/react

This is a pre-built, plug-and-play, fully accessible React component that will produce an `<input type="time">` 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>
            <span>{label}</span>
            <TimeInputPolyfill
                // Set the value through props
                value={value}
                // Pass in the state setter
                setValue={setValue}
            />
        </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 (
        <form>
            <TimeInput
                label="Label text"
                // Use the state value to set the time
                value={inputValue}
                // Pass the state setter function into the component
                setValue={setInputValue}
            />
            <button type="submit">Submit</button>
        </form>
    )
}
```

You can also force-enable the polyfill so that it is active in modern browsers that support `<input type="time">` 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>
            <span>{label}</span>
            <TimeInputPolyfill
                value={value}
                setValue={setValue}
                /* Force browsers that support input[type=time]
                   to use the polyfill.
                   (useful for testing and debugging) */
                forcePolyfill={true}
            />
        </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
<script src="https://cdn.jsdelivr.net/npm/@time-input-polyfill/utils@1"></script>
```

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
<TimeInput
    value={currentValue}
    setValue={setCurrentValue}
    polyfillSource="/path/to/timePolyfillUtils.js"
/>
```

## 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()

// ...

<TimeInput value={value} onChange={({ value }) => {
    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])

// ...

<TimeInput value={value} setValue={setValue} />
```

Note: It is still possible to use `onChange`, however this is just an extension of the native `<input type="time">` `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`

---
_Source: https://npm.io/package/@time-input-polyfill/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._