Skip to main content
Version: 2.13.0

SelectCountry

A thin specialization of Dropdown that renders an image (usually a country flag) next to each item's label. Every Dropdown prop is supported — SelectCountry adds two of its own.

Minimal example​

import { useState } from 'react';
import { SelectCountry } from '@carlos3g/element-dropdown';

const local_data = [
  {
    value: '1',
    lable: 'Country 1',
    image: {
      uri: 'https://www.vigcenter.com/upload/images/flag/GB.png',
    },
  },
  {
    value: '2',
    lable: 'Country 2',
    image: {
      uri: 'https://www.vigcenter.com/upload/images/flag/FR.png',
    },
  },
];

export function CountryPicker() {
  const [country, setCountry] = useState('1');

  return (
    <SelectCountry
      data={local_data}
      value={country}
      valueField="value"
      labelField="lable"
      imageField="image"
      placeholder="Select country"
      onChange={(e) => setCountry(e.value)}
    />
  );
}

Props​

SelectCountry accepts every prop that Dropdown does, plus:

PropTypeRequiredDescription
imageFieldstringYesField on each item whose value is an ImageSourcePropType (e.g. a { uri } object or a require(...)).
imageStyleImageStyleNoStyle applied to the image rendered next to each label.

Items also render their image in the trigger when selected.

Imperative ref​

Same as Dropdown:

import type { ISelectCountryRef } from '@carlos3g/element-dropdown';

const ref = useRef<ISelectCountryRef>(null);

See also​