react-country-flags-select

A customizable SVG flags select component and standalone SVG flags components are provided by this React component.

Live demo example

Live demo stackblitz.com

Storybook

Installation and usage

npm install react-country-flags-select

Usage

ReactCountryFlagsSelect

1import React, { useState } from "react";
2import ReactCountryFlagsSelect from "react-country-flags-select";
3
4const App = () => {
5  const [selected, setSelected] = useState(null);
6
7  <ReactCountryFlagsSelect selected={selected} onSelect={setSelected} />;
8};
9
10export default App;

Countries

List of Countries with country codes. Countries.

Props

• selected - is a required object prop that contains current label and country code of the input.
  

• onSelect - is a required function prop that receive the selected country from the user, which will be used to update the selected value.
  

• customCountries - an option object prop that you can pass to replace default countries with your own object.
  

• searchable - an option boolean prop that you can pass to make select searchable. false by default.
  

• customLabelOptions- an optionobject prop that you can pass to rewrite original labels.
  

• labelWithCountryCode - an option boolean prop that you can pass to see the country label in format United States (US). false by default.
  

• labelOnlyCountryCode - an option boolean prop that you can pass to see the country label in format US. false by default.
  

• searchPlaceholder - an option string prop that you can pass to replace default placeholder in searchable mode.
  

• selectPlaceholder - an option string prop that you can pass to replace default placeholder in not searchable mode.
  

• CustomOpenIcon & CustomCloseIcon - an option props that you can pass to replace default open and close icons.
  

• clearIcon - an option boolean prop that you can pass to remove clear icon. true by default.
  

• selectWidth & selectHeight - an option number props that you can pass to change the width or height of the select. By default selectWidth = 250px, selectHeight = 30px.
  

• optionSize & selectedSize an option number props that you can pass to change font size of the option or selected element. By default optionSize = 16px, selectedSize = 16px.
  

• fullWidth = an option boolean prop that you can pass to make select element full width. By default false. if fullWidth = true will ignore selectWidth & selectHeight props.
  

• optionsListMaxHeight - an option number prop that you can pass to change the max height of the dropdown overlay. By default optionsListMaxHeight = 300px.
  

• disabled = an option boolean prop that you can pass to disable select element.
  

• id = an option string prop that you can pass to container element.
  

• classes = an option object prop that you can pass to rewrite default classes.
  

you can override such classes as:

container, selectWrapper, searchSelect, buttonSelect, buttonSelectText, clearIcon, optionsWrapper, option, optionFlag, optionText, openIcon, closeIcon.

1import { ReactComponent as SomeIcon } from "../SomeIcon.svg";
2
3const [selected, setSelected] = useState(null);
4const customCountries = {
5  US: "United States",
6  AF: "Afghanistan",
7  AL: "Albania",
8  DZ: "Algeria",
9  US: "United States",
10};
11const customLabelOptions = {
12  US: "U*S*A",
13};
14const searchPlaceholder = "some custom placeholder";
15const selectPlaceholder = "some custom placeholder";
16const classes = {
17  container: "someNewClass",
18  selectWrapper: "someNewClass",
19  searchSelect: "someNewClass",
20  buttonSelect: "someNewClass",
21  buttonSelectText: "someNewClass",
22  clearIcon: "someNewClass",
23  optionsWrapper: "someNewClass",
24  option: "someNewClass",
25  optionFlag: "someNewClass",
26  optionText: "someNewClass",
27  openIcon: "someNewClass",
28  closeIcon: "someNewClass",
29};
30
31<ReactCountryFlagsSelect
32  selected={selected}
33  onSelect={onSelect}
34  customCountries={customCountries}
35  customLabelOptions={customLabelOptions}
36  searchPlaceholder={searchPlaceholder}
37  selectPlaceholder={selectPlaceholder}
38  CustomOpenIcon={SomeIcon}
39  CustomCloseIcon={SomeIcon}
40  clearIcon={false}
41  searchable
42  labelWithCountryCode
43  labelOnlyCountryCode
44  selectWidth={350}
45  selectHeight={40}
46  optionSize={20}
47  selectedSize={20}
48  fullWidth
49  disabled
50  classes={classes}
51  optionsListMaxHeight={300}
52  id
53/>;

Country Flag

1import React from "react";
2import { Us } from "react-country-flags-select";
3
4const Region = () => (
5  <div>
6    <Us /> United States
7  </div>
8);
9
10export default Region;

Contribution

This project is written in Typescript. Storybook. Tests are written with Jest and React Testing Library. Raise a pull request with your changes.

Installation

npm install

License

MIT license.