Fix types when updating 7.1.3
angelod1as opened this issue · comments
Describe the bug
We have created a component that uses useIMask
but now, trying to update from 6.4.3 to 7.1.3, our types are broken.
import { FC, RefObject, useEffect } from "react"
import { useIMask } from "react-imask"
import { ReactMaskProps } from "react-imask/dist/mixin"
import { Input, InputProps } from "src/components/common/input/Input"
export type MaskedInputProps = Omit<InputProps, "onChange"> & {
maskOptions: IMask.AnyMaskedOptions
onAccept?: ReactMaskProps["onAccept"]
}
export const MaskedInput: FC<MaskedInputProps> = ({
maskOptions,
onAccept,
...inputProps
}) => {
const { ref, setTypedValue } = useIMask(maskOptions, {
onAccept,
})
//Setting of initial value, only during the first load
useEffect(() => {
setTypedValue(inputProps?.defaultValue?.toString() || "")
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [inputProps?.id]) //setting id as dependency since it changes based on fields
return <Input ref={ref as RefObject<HTMLInputElement>} {...inputProps} />
}
I tried fixing the types but can't find any documentation on it, nor decipher the source types.
What breaks is:
import { ReactMaskProps } from "react-imask/dist/mixin"
Is not available anymore. So I import from somewhere else, so far so good:
import { ReactMaskProps, useIMask } from "react-imask"
But now it errors: Generic type 'ReactMaskProps' requires between 1 and 2 type arguments.
Also, the IMask
is not found anymore:
maskOptions: IMask.AnyMaskedOptions
onAccept?: ReactMaskProps["onAccept"]
Both break.
To Reproduce
See the code above.
Expected behaviour
The types should work or there should be docs describing what to do.
Environment:
- OS: macOS 14.1.1
- Browser: not applicable
- Version: not applicable
- IMask version: see above
@angelod1as hey, you can find the API for new useIMask
version here
there is no AnyMaskedOptions
anymore.
ReactMaskProps
now depends on Opts
used to type imask to automatically infer types for values.
Yeah the docs can be better i know ...