react-select: Is it possible to add animated components and custom components simultaneously?

user_15407090 0
Viewed 560

I'm wondering if it is possible to add animated components and custom components simultaneously in a components prop inside a Select component. Couldn't find anything in the react-select documentation, unfortunately.

With "animated components" I'm referring to these: https://react-select.com/home#animated-components.

"Custom components" would be these: https://react-select.com/components#replaceable-components

In my case the custom component would be this one:

// Custom component
const CustomMultiValue = (
    props: MultiValueProps<FilterOptions, GroupTypeBase<FilterOptions>>
  ) => (
    <components.MultiValue {...props}>{props.data.label}</components.MultiValue>
  );

// Animated components
  const animatedComponents = makeAnimated();

The Select looks like this:

<Select
      isMulti
      onChange={(value) => handleChange(value)}
      styles={customSelectStyles}
      components={{ MultiValue: CustomMultiValue }}
      theme={customSelectTheme}
      closeMenuOnSelect={false}
      placeholder={placeholder}
/>

I've tried a bunch of ways to add the animatedComponents, but nothing seems to work. For example:

components={animatedComponents, { MultiValue: CustomMultiValue }}

components={{ MultiValue: CustomMultiValue, Control: animatedComponents }}

Anyone got an idea? Thanks!

react-select reactjs
1 Answers

I assume that what you want is customize your MultiValue component in order to make it animated.

You can see in the documentation for animated components that makeAnimated method create a wrapper for components passed as arguments and:

If no arguments are passed, built-in components are wrapped instead.

In your code this is the built-in MultiValue component that will be animated

If this is what you want you have to pass you custom MultiValue as argument to makeAnimated and use animatedComponents in the components props of Select

// Animated components
  const animatedComponents = makeAnimated({ MultiValue: CustomMultiValue });

...

<Select
      isMulti
      components={animatedComponents}
      ...
/>

You can try it in this code sandbox where the MultiValue is animated and customized to display a custom label

https://codesandbox.io/s/clever-payne-ehi8t?file=/src/App.tsx

user_164400680
Related