Last active
May 29, 2021 08:36
-
-
Save MidhaTahir/e39e6e31d332f8e46e987cd4b5fb5899 to your computer and use it in GitHub Desktop.
React Select Dropdown with Icon and Label
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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