CODEWITHSUNDEEP
reactjstypescriptuse-ref
johann
johann

Reputation: 1135

useRef with typescript on custom input element

I am struggling in using useRef on an input with typescript. I've checked many links like this one but I am still getting the same error.

const MainHeader: React.FC = () => {

const InputStyled = styled(Input)`
  // some basic css
`;

const searchElement = useRef<HTMLInputElement>(null);

return (
  <>
    <InputStyled full ref={searchElement} type="search" />
  </>
);
}

My Input component :

export type SearchFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
  full?: boolean;
  medium?: boolean;
  light?: boolean;
};

const SearchField = styled.input<SearchFieldProps>`
  // css rules here
`;

const Input: React.FC<SearchFieldProps> = (props) => <SearchField {...props} />;

export default Input;

I am not doing anything exotic here I think, but it returns :

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<PropsWithChildren<SearchFieldProps>, "form" | "slot" | "style" | "title" | "pattern" | "type" | "name" | "defaultChecked" | ... 279 more ... | "light"> & Partial<...>, "form" | ... 286 more ... | "light"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ ref: RefObject<HTMLInputElement>; full: true; placeholder: string | undefined; type: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<SearchFieldProps>, "form" | "slot" | "style" | "title" | "pattern" | ... 282 more ... | "light"> & Partial<...>, "form" | ... 286 more ... | "light"> & { ...; } & { ...; }'.
      Property 'ref' does not exist on type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<SearchFieldProps>, "form" | "slot" | "style" | "title" | "pattern" | ... 282 more ... | "light"> & Partial<...>, "form" | ... 286 more ... | "light"> & { ...; } & { ...; }'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<FC<SearchFieldProps>, any, {}, never, FC<SearchFieldProps>>): ReactElement<...>', gave the following error.
    Type '{ ref: RefObject<HTMLInputElement>; full: true; placeholder: string | undefined; type: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<SearchFieldProps>, "form" | "slot" | "style" | "title" | "pattern" | ... 282 more ... | "light"> & Partial<...>, "form" | ... 286 more ... | "light"> & { ...; } & { ...; }'.
      Property 'ref' does not exist on type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<SearchFieldProps>, "form" | "slot" | "style" | "title" | "pattern" | ... 282 more ... | "light"> & Partial<...>, "form" | ... 286 more ... | "light"> & { ...; } & { ...; }'.

Any idea/advice is welcome !

Thanks

Upvotes: 1

Views: 4780

Answers (1)

Sam
Sam

Reputation: 1239

You need to use forwardRef for your use case. Your Input component should be like below.

import React from "react";
import styled from "styled-components";

export type SearchFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
  full?: boolean;
  medium?: boolean;
  light?: boolean;
 
};

const SearchField = styled.input<SearchFieldProps>`
  // css rules here
`;

const Input = React.forwardRef<HTMLInputElement>((props, ref) => (
  <SearchField {...props} ref={ref} />
));

export default Input;

2nd Solution

import React, { FC } from "react";
import styled from "styled-components";

export type SearchFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
  full?: boolean;
  medium?: boolean;
  light?: boolean;
  ref?: React.ForwardedRef<HTMLInputElement>;
};

const SearchField = styled.input<SearchFieldProps>`
  // css rules here
`;

const Input: FC<SearchFieldProps> = React.forwardRef((props, ref) => (
  <SearchField {...props} ref={ref} />
));

export default Input;

Upvotes: 2

Related Questions