Skip to content

Instantly share code, notes, and snippets.

@MidhaTahir
Last active May 29, 2021 08:36
Show Gist options
  • Save MidhaTahir/e39e6e31d332f8e46e987cd4b5fb5899 to your computer and use it in GitHub Desktop.
Save MidhaTahir/e39e6e31d332f8e46e987cd4b5fb5899 to your computer and use it in GitHub Desktop.
React Select Dropdown with Icon and Label
import React, { useState } from "react";
import { FaList, FaChevronDown } from "react-icons/fa";
import CashIcon from "../../images/CashIcon.png";
import StripeIcon from "../../images/StripeIcon.png";
import CreditCardIcon from "../../images/CreditCardIcon.png";
import BankTransferIcon from "../../images/BankTransferIcon.png";
import Select, { components } from "react-select";
const DropDownWithSvg = ({ options }) => {
const { Option, SingleValue } = components;
const IconOption = (props) => {
return (
<Option {...props}>
<div className="d-flex align-items-center">
<img
src={props.data.labelPic}
alt={props.data.label}
/>
{props.data.label}
</Option>
</div>
);
};
const ValueOption = (props) => (
<SingleValue {...props}>
<div>{props.data.label}</div>
</SingleValue>
);
const [selected, setSelected] = useState({
label: "Choose Payment Method",
value: null,
});
const handleChange = (newValue) => {
setSelected({ label: newValue.label, value: newValue.value });
}
return (
<div>
<i>{<FaList color="#585858" />}</i>
<Select
onChange={handleChange}
options={options}
value={selected}
components={{
DropdownIndicator: () => <FaChevronDown className="down-indicator" />,
Option: IconOption,
SingleValue: ValueOption,
}}
/>
</div>
);
};
DropDownWithSvg.defaultProps = {
options: [
{ value: "Cash", label: "Cash", labelPic: CashIcon },
{ value: "Card", label: "Card", labelPic: CreditCardIcon },
{
value: "Bank Transfer",
label: "Bank Transfer",
labelPic: BankTransferIcon,
},
{ value: "Stripe", label: "Stripe", labelPic: StripeIcon },
],
};
export default DropDownWithSvg;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment