Extending/forwarding types when wrapping component

[viveleroi]

I've wrapped this component so it works like any of our other input components but am struggling to figure out how to properly extend the types. Normally I can just use type FooInputProps = LibComponentProps & {...} but no matter what I try I can't get things like lazy and overwrite etc to show as valid properties, yet they work fine when I use the actual IMaskInput component.

react-imask 7.3.0

export const MaskedInput = ({
  asterisk,
  label,
  name,
  ...props
}: MaskedInputProps): JSX.Element => {
  return (
    <>
      {label && <Label asterisk={asterisk} htmlFor={id} label={label} />}
      <IMaskInput className={classNames} inputRef={ref} {...props} lazy={false} placeholderChar='_' {...reg} />
    </>
  )
}

Any tips? I'm not sure why the input.d.ts file doesn't remotely match what I see here in github, maybe an unreleased update? I just need to allow my component to accept any props the IMaskInput component does.

[uNmAnNeR]

@viveleroi hi, i see all types is released https://unpkg.com/react-imask@7.3.0/esm/index.d.ts
check how IMaskInput is typed https://github.com/uNmAnNeR/imaskjs/blob/da541c6f8f621ded0e03ff3ab9225b638d1c4438/packages/react-imask/src/input.ts
guess you need to extend IMaskInputProps<your element>

[viveleroi]

I tried that originally but a) our component type only inherits a small subset of HTMLInputElement so I get type warnings if I pass our interface as the generic but more critically, doing that still doesn't show the right props.

For example in the below component I'm trying to default the placeholderChar prop but still let our developers pass in a custom value when needed, yet typescript says that placeholderChar does not exist on MaskedInputProps

export type MaskedInputProps = IMaskInputProps<HTMLInputElement> & TypedInputProps

export const MaskedInput = ({
  asterisk,
  label,
  name,
  placeholderChar = '_',
  ...props
}: MaskedInputProps): JSX.Element => {
  return (
    <>
      {label && <Label asterisk={asterisk} htmlFor={id} label={label} />}
      <IMaskInput className={classNames} inputRef={ref} {...props} lazy={false} placeholderChar={placeholderChar} {...reg} />
    </>
  )
}