How can I extend the props to include my own?

[tuhin-tsm]

I wrapped Select inside a Box so that I can pass some other props for ex. data-testid. Here is the example CodeSandbox: https://codesandbox.io/s/priceless-lucy-6dmj4?file=/src/index.tsx:539-636

But I am not able to pass the Option type through generic. How can I do that?

[csandman]

I modified your example to work right, you need to accept the generics into your component by defining them before your arguments of your component.

https://codesandbox.io/s/friendly-microservice-s9wug?file=/src/AutoComplete.tsx

import * as React from "react";
import { Box } from "@chakra-ui/react";
import {
  Props,
  Select as ChakraReactSelect,
  GroupBase, // Used for your generic's default value
  ChakraStylesConfig
} from "chakra-react-select";

interface ExtraProps {
  dataTestId?: string;
  // may be some other props
}

// Define your generics after the component's name in order to forward them to the underlying `Select`
export function AutoComplete<
  Option,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>
>({
  dataTestId,
  ...rest
}: Props<Option, IsMulti, Group> & ExtraProps): React.ReactElement {
  // you need to pass the generics into you `ChakraStylesConfig` type
  const autoCompleteStyles: ChakraStylesConfig<Option, IsMulti, Group> = {
    container: (provided) => ({
      ...provided,
      borderRadius: "md"
    }),
    // ....rest of the chakra styles....
    valueContainer: (provided) => ({
      ...provided,
      pl: 4,
      pr: 0
    })
  };

  return (
    <Box data-testid={dataTestId}>
      <ChakraReactSelect<Option, IsMulti, Group>
        chakraStyles={autoCompleteStyles}
        noOptionsMessage={() => "Custom message"}
        placeholder="Select an option..."
        {...rest}
      />
    </Box>
  );
}

They have a similar example in the react-select docs for the basics of making a wrapper for the select: https://react-select.com/typescript

[tuhin-tsm]

Thank you for the detailed answer.

[csandman]

You're welcome!