React-Select - Replacing Components for custom option content

Question

Using React-Select (version 2) I would like to have custom designed (select) options.

The documentation suggests that Replacing Components would be a method that I could

Answer 1

Generally, you indeed want to use formatOptionLabel prop (no extra component). But in case you don't, you may override the Option component this way:

import Select, { components } from 'react-select';

const CustomOption = ({ children, ...props }) => {
  return (
    <components.Option {...props}>
      <img src={...} />
      {children}
    </components.Option>
  );
};

function App() {
  return (
    <Select components={{Option: CustomOption}} ... />
  );
}

Here I reuse the stock component (components.Option). This way I don't need to care about innerRef or something.

https://codesandbox.io/s/react-select-item-icon-2z3tb

Answer 2

For a majority of use cases, you probably don't need to replace the full Option component. If you're looking to stay with the same overall structure and look and feel of the Option, but you want to display several blocks of text, or an image, or some other special treatment to the body of each option, there is an easier way.

That's to use the formatOptionLabel render prop.

import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";

const options = [
  { value: "Abe", label: "Abe", customAbbreviation: "A" },
  { value: "John", label: "John", customAbbreviation: "J" },
  { value: "Dustin", label: "Dustin", customAbbreviation: "D" }
];

const formatOptionLabel = ({ value, label, customAbbreviation }) => (
  <div style={{ display: "flex" }}>
    <div>{label}</div>
    <div style={{ marginLeft: "10px", color: "#ccc" }}>
      {customAbbreviation}
    </div>
  </div>
);

const CustomControl = () => (
  <Select
    defaultValue={options[0]}
    formatOptionLabel={formatOptionLabel}
    options={options}
  />
);

ReactDOM.render(<CustomControl />, document.getElementById("root"));

https://codesandbox.io/embed/reactselect-formatoptionlabel-bde1q

https://react-select.com/props - search for formatOptionLabel

Answer 3

You can replace any component by including your override in the components property.

<Select components={{Option: MyOption}} />

Something like:

const MyOption = props => {
  const { innerProps, innerRef } = props;
  return (
    <article ref={innerRef} {...innerProps} className="custom-option">
      <h4>{props.data.artist}</h4>
      <div className="sub">{props.data.title} </div>
    </article>
  );
};

<Select components={{Option: MyOption}} />

The innerRef and innerProps properties are very important, as they carry forward things like the hover and onClick needed by the Option. The data in props is where your option data is.