how to style Options with details

[kobe651jp]

I'm trying to use react-select options with detail explanation.

Like as follows.

Is it possible use react-select ?

[manjushsh]

@kobe651jp You can totally do this custom options using react-select custom components!
React Select Components

Style and customize
Sandbox

import React from "react";
import ReactDOM from "react-dom";
import Select, { components } from "react-select";

import "./styles.css";

const CustomOption = (props) => {
  const { data, innerRef, innerProps } = props;
  return data.custom ? (
    <div ref={innerRef} {...innerProps}>
      I'm a custom link
    </div>
  ) : (
    // <components.Option {...props} />
    <components.Option {...props}>
      <div className={"option-container"}>
        <div className={"row col-sm-12"}>
          <div className="col-sm-11">
            <div className="flavour">{props.data.label}</div>
          </div>
          <div className="col-sm-1">
            <span className="check-mark">✓</span>
          </div>
        </div>
        <hr />
        <div className="colour">{props.data.color}</div>
      </div>
    </components.Option>
  );
};

const options = [
  { value: "chocolate", label: "Chocolate", color: "black" },
  { value: "strawberry", label: "Strawberry", color: "Pink" },
  { value: "vanilla", label: "Vanilla", color: "white" },
  { custom: true }
];

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

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

[kobe651jp]

It's perfect. It was very helpful.