v2.0.0 - Major Overhaul
I completely rebuilt the plugin from the ground up to have more easily shared code with other time-input-polyfills I'm planning on making.
It also has robust automated testing built into it now for quality assurance.
Breaking changes in v2.0.0
onChange
replaced with setValue
In v1 you updated the value using an onChange
event. This was really clunky though.
// 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:
// 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:
@time-input-polyfill/react/dist/timePolyfillUtils.js
.
That doesn't exist anymore, you need to import from here instead now:
@time-input-polyfill/utils/npm/time-input-polyfill-utils.min.js