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.

dan503

react-time-input-polyfill

	"description": "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.",

	"main": "dist/ReactTimeInputPolyfill.js",

	"module": "src/time-polyfill/ReactTimeInputPolyfill.js",

		"url": "git+https://github.com/Dan503/react-time-input-polyfill.git"

		"url": "https://github.com/Dan503/react-time-input-polyfill/issues"

	"homepage": "https://dan503.github.io/react-time-input-polyfill/",

		"@babel/plugin-proposal-optional-chaining": "^7.14.5",

		"@typescript-eslint/eslint-plugin": "^4.23.0",

		"@typescript-eslint/parser": "^4.23.0",

		"babel-plugin-named-asset-import": "^0.3.7",

		"case-sensitive-paths-webpack-plugin": "^2.4.0",

		"jest-environment-jsdom-fourteen": "^1.0.1",

		"optimize-css-assets-webpack-plugin": "^5.0.4",

		"rollup-plugin-node-resolve": "^5.2.0",

		"start": "npx rollup --config && gulp",

		"react-start": "node node_modules/react-scripts/scripts/start.js",

		"build": "npx rollup --config && gulp build",

		"react-build": "node node_modules/react-scripts/scripts/build.js",

## IMPORTANT! This package has been renamed

[@time-input-polyfill/react](https://www.npmjs.com/package/@time-input-polyfill/react)

Version 1 ("react-time-input-polyfill") is not supported anymore, please migrate to version 2.

There were breaking changes made in v2.0.0 for the sake of making the usage of the component more streamlined.

See the [v2 release notes](https://github.com/Dan503/react-time-input-polyfill/releases/tag/v2.0.0-major-overhaul) for more details.

[![hits per month badge](https://data.jsdelivr.com/v1/package/npm/react-time-input-polyfill/badge)](https://www.jsdelivr.com/package/npm/react-time-input-polyfill)

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

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. It does import some functionality from the original though where it made sense to.

You can [view a demo](https://dan503.github.io/react-time-input-polyfill/) of `react-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/

The component needs an ES6 compatible environment to run in. It also needs React installed on the project. Take a look at [create-react-app](https://create-react-app.dev/docs/getting-started) to get started with React.

You can then install this polyfill component with npm:

// Import the component into your project

import TimeInputPolyfill from 'react-time-input-polyfill'

export const TimeInput = ({ label, currentValue, onInputChange }) => {

                // set the value through props

                // onChange will run every time the value is updated

                onChange={({ value, element }) => {

                        // The current value in 24 hour time format

                        // The <input> HTML element

                    // Export the new value to the parent component

// import your local time input component into your form component

    // Use state to keep track of the value

    const [inputValue, setInputValue] = useState('20:30') // default to 8:30 PM

                // Use the state value to set the time

                currentValue={inputValue}

                // Use the set state function to update the time when it changes

                onInputChange={ newValue => setInputValue(newValue) }

            <button type="submit">Submit</button>

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).

		{
		"name": "react-time-input-polyfill",
		"version": "1.0.8",
		"version": "1.0.9",
		"description": "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.",
		@@ -5,0 +5,0 @@ "main": "dist/ReactTimeInputPolyfill.js",

		@@ -1,3 +0,25 @@
		# react-time-input-polyfill
		# {DEPRECATED} react-time-input-polyfill

		## IMPORTANT! This package has been renamed

		The new name for the polyfill is:

		[@time-input-polyfill/react](https://www.npmjs.com/package/@time-input-polyfill/react)

		You can install the new version using:

		```
		npm i @time-input-polyfill/react
		```

		Version 1 ("react-time-input-polyfill") is not supported anymore, please migrate to version 2.

		### Migration details

		There were breaking changes made in v2.0.0 for the sake of making the usage of the component more streamlined.

		See the [v2 release notes](https://github.com/Dan503/react-time-input-polyfill/releases/tag/v2.0.0-major-overhaul) for more details.

		## DEPRECATED documentation...

		[![hits per month badge](https://data.jsdelivr.com/v1/package/npm/react-time-input-polyfill/badge)](https://www.jsdelivr.com/package/npm/react-time-input-polyfill)
		@@ -4,0 +26,0 @@

Improved metrics

Worsened metrics