Aliendreamer

flag dropdown example

Jan 22nd, 2022 (edited)
712
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import "./styles.css";
  2. import Select from "react-select";
  3. import { hasFlag } from "country-flag-icons";
  4. import { countries } from "countries-list";
  5. import Flags from "country-flag-icons/react/3x2";
  6.  
  7. export default function App() {
  8.   const options = Object.entries(countries)
  9.     .map((code) => {
  10.       const exist = hasFlag(code[0]);
  11.       if (!exist) {
  12.         return undefined;
  13.       }
  14.       const Component = Flags[code[0]];
  15.       return {
  16.         value: code[1].name,
  17.         label: (
  18.           <>
  19.             <Component
  20.               title={code[0]}
  21.               style={{ display: "inline-block", height: "1em", width: "1em" }}
  22.             />
  23.             &nbsp;
  24.             <span>{`${code[0]} ${code[1].name}`}</span>
  25.           </>
  26.         )
  27.       };
  28.     })
  29.     .filter(Boolean);
  30.   return (
  31.     <div className="App">
  32.       <h1>Hello CodeSandbox</h1>
  33.  
  34.       <div>
  35.         <Select
  36.           isMulti={true}
  37.           isClearable={true}
  38.           isSearchable={true}
  39.           isDisabled={false}
  40.           name="colors"
  41.           options={options}
  42.           classNamePrefix="select"
  43.         />
  44.       </div>
  45.     </div>
  46.   );
  47. }
  48.  
RAW Paste Data Copied