How to properly receive props data in react-select's custom component?

[stonix26]

I created a custom component to customize the control field, for me to place a custom label with animation. And I can't figure out where to place or receive that prop.

import React from "react";
import { components, ControlProps, GroupBase, Props } from "react-select";
import ReactSelectAsync, { AsyncProps } from "react-select/async";

type TCustomAsyncSelect = (
  props: Props &
    Pick<
      AsyncProps<unknown, boolean, GroupBase<unknown>>,
      "defaultOptions" | "cacheOptions" | "loadOptions" | "isLoading"
    >
) => JSX.Element;

const Control:
  | React.ComponentType<ControlProps<unknown, boolean, GroupBase<unknown>>>
  | undefined = (props) => (
  <div style={{ backgroundColor: "pink", padding: "10px 20px" }}>
    <p>dynamic label title here</p>
    <components.Control {...props} />
  </div>
);

const CustomAsyncSelect: TCustomAsyncSelect = (props) => (
  <ReactSelectAsync {...props} components={{ Control }} />
);

export default CustomAsyncSelect;

I tried placing the custom control component inside my CustomAsyncSelect component, so that I can easily receive my label prop from my CustomAsyncSelect, but it seems there's an issue during render, it loses focus on every keystroke.

Here's my codesandbox for you to play around with.

[hoffmanilya]

Check out the TypeScript documentation, specifically around adding custom props to the Select component.

You can access the props passed to the Select component using props.selectProps inside your Control component.

import React from "react";
import { components, ControlProps, GroupBase, Props } from "react-select";
import ReactSelectAsync, { AsyncProps } from "react-select/async";

// Add your custom props.
declare module "react-select/dist/declarations/src/Select" {
  export interface Props<
      Option,
      IsMulti extends boolean,
      Group extends GroupBase<Option>
  > {
      dynamicTitle: string
  }
}

type TCustomAsyncSelect = (
  props: Props &
    Pick<
      AsyncProps<unknown, boolean, GroupBase<unknown>>,
      "defaultOptions" | "cacheOptions" | "loadOptions" | "isLoading"
    >
) => JSX.Element;

const Control:
  | React.ComponentType<ControlProps<unknown, boolean, GroupBase<unknown>>>
  | undefined = (props) => (
  <div style={{ backgroundColor: "pink", padding: "10px 20px" }}>
    <p>{props.selectProps.dynamicTitle}</p>
    <components.Control {...props} />
  </div>
);

const CustomAsyncSelect: TCustomAsyncSelect = (props) => (
  <ReactSelectAsync {...props} components={{ Control }} dynamicTitle="Title Here" />
);

export default CustomAsyncSelect;

[stonix26]

Wow, thank you very much @hoffmanilya

[SKaralius]

Thanks for the answer, this really is a nice way to solve this issue. But adding that custom prop to the module declaration makes it so all usages of the select component have that property.

What if you're customizing your react-select with various components which require properties passed to them? Is it possible to extend properties of react-select when certain components are passed to it?

In other words, if we go back to OP's example, if you pass Control as a custom component, I would expect typescript to tell me that dynamicTitle is required, but then if that component is not added, then it would not be required. And other custom components would extend react-select's type with their own properties.

Also, would it be possible to avoid the remounting issue using useCallback?

[Methuselah96]

It is not possible to define different custom props per component at the moment, see #4804 (comment).

[SKaralius]

Thanks, I decided to go with optional props in module augmentation and throw warnings for the developer on runtime errors if they happen.