Props in custom component

[mbagatini]

My question is...
Hi dev!

I would like to ask for some help in creating a custom component with the chakra-react-select in typescript. I'm struggling with the Select props in my component, because the props are not showing up in the custom component.

Can you please provide a code example?

I appreciate your attention!

[csandman]

It would be helpful to have a code example of what you've tried so far because I can't tell exactly what you're trying to do/what you're having issues with. Do you mean the props are not getting recognized by TypeScript or that you aren't able to access them at all?

If its TypeScript which is not recognizing custom selectProps you're passing in, you'll need to use module augmentation on the original select types in a similar way to how I am for some of my custom props: https://github.com/csandman/chakra-react-select/blob/main/src/module-augmentation.ts

If thats not what you mean then I'll need more info before I can offer any other help.

[mbagatini]

The typescript is not suggesting the props when you are working with the component. I will share my code to let it clear:

Component:

import { FC } from "react";
import { Select, SelectComponent } from "chakra-react-select";

import { chakraStyles } from "../styles/selectChakraStyles";

export const CustomSelect: FC<SelectComponent> = (props) => {
  return <Select chakraStyles={chakraStyles} {...props} />;
};

When I am using the component the props suggestions are not working. It can't see the attribute "options" for example:

Thanks for your help!

[csandman]

Ah ok, yeah that took me a while to figure out when I was wrapping the original package. What you probably want to do is something similar to what I'm doing in this file: https://github.com/csandman/chakra-react-select/blob/main/src/select.tsx

import React, { forwardRef } from "react";
import type { MutableRefObject } from "react";
import { Select } from "chakra-react-select";
import type {
  SelectComponent,
  SelectInstance,
  Props,
  GroupBase
} from "chakra-react-select";
// import { chakraStyles } from "../styles/selectChakraStyles";

const CustomSelect = forwardRef(
  <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
    props: Props<Option, IsMulti, Group>,
    ref:
      | ((instance: SelectInstance<Option, IsMulti, Group> | null) => void)
      | MutableRefObject<SelectInstance<Option, IsMulti, Group> | null>
      | null
  ) => {
    return (
      <Select
        ref={ref}
        // chakraStyles={chakraStyles} <-- Add your own
        {...props}
      />
    );
  }
) as SelectComponent;

export default CustomSelect;

My implementation for this is almost a direct copy of the way they have it in the original react-select project and it was the only way I could get it to work right.

Also I made a CodeSandbox example for you but for some reason the SelectComponent type is not getting recognized, but it worked when I tried it locally. I'll link it here anyway: https://codesandbox.io/s/chakra-react-select-custom-select-umki9e?file=/components/custom-select.tsx

[mbagatini]

Thanks a lot Chris! It worked perfectly!

Hope it can help more people in the community.

[csandman]

Glad to hear it!