# react-continent-country-select

> React Bootstrap Continent Country Select

Latest version **1.0.7** (published 2020-05-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-continent-country-select
pnpm add react-continent-country-select
yarn add react-continent-country-select
bun add react-continent-country-select
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2020-05-02 |
| First published | 2020-04-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 4 |
| Unpacked size | 324.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | mjakal |
| Maintainers | mjakal |

## Links

- npm: https://www.npmjs.com/package/react-continent-country-select
- Repository: https://github.com/mjakal/react-continent-country-select
- Homepage: https://github.com/mjakal/react-continent-country-select#readme
- Issues: https://github.com/mjakal/react-continent-country-select/issues
- npm.io page: https://npm.io/package/react-continent-country-select

## Dependencies (4)

- [bootstrap](https://npm.io/package/bootstrap.md) ^4.4.1
- [reactstrap](https://npm.io/package/reactstrap.md) ^8.4.1
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
- [flag-icon-css](https://npm.io/package/flag-icon-css.md) ^3.4.6

## Recent versions

- 1.0.7 (latest) — 2020-05-02
- 1.0.5 — 2020-04-30
- 1.0.4 — 2020-04-29
- 1.0.3 — 2020-04-28
- 1.0.2 — 2020-04-28
- 1.0.1 — 2020-04-28
- 1.0.0 — 2020-04-28

## README

# react-continent-country-select

![React Continent Country Select Screenshot](https://i.ibb.co/FmKrGMJ/react-continent-country-select.png)

[![NPM](https://img.shields.io/npm/v/react-continent-country-select.svg)](https://www.npmjs.com/package/react-continent-country-select) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

**LIVE DEMO:** [https://mjakal.github.io/react-continent-country-select/](https://mjakal.github.io/react-continent-country-select/)

## Requirements

- bootstrap >= 4.0.0
- flag-icon-css >= 3.0.0 - if you want to display country flags (not required)
- font-awesome >= 4.7.0 - used for toggle button icon (not required)
- react >= 16.8.0
- react-dom >= 16.8.0
- reactstrap >= 8.0.0

## Install

```bash
npm install --save react-continent-country-select
```

## Usage

```jsx
import React, { useState } from 'react';
import {
  ContinentCountrySelect,
  deserializeCountries,
  serializeCountries
} from 'react-continent-country-select';
import 'react-continent-country-select/dist/index.css';
import continents from 'react-continent-country-select/dist/continent_countries.json';

// pre-selected values from e.g. API endpoint
const countries = ['be', 'nl', 'hr'];
// Deserialize data: convert ['be', 'nl', 'hr'] to { BE: true, NL: true, HR: true }
const deserializedCountries = deserializeCountries(countries);

const App = () => {
  const [selectedCountries, setSelectedCountries] = useState({
    ...deserializedCountries
  });

  // You can create custom country component
  const CountryComponent = ({ country }) => {
    const code = country.code.toLowerCase();
    const label = `${country.name} (+${country.dial_code})`;

    return (
      <span>
        <i
          style={{ width: '30px' }}
          className={`flag-icon flag-icon-${code} mr-1`}
        />
        {label}
      </span>
    );
  };

  const onChange = selected => setSelectedCountries({ ...selected });

  const onSerializeData = () => {
    // Serialize selected countries
    // The second boolean param is used for serializing data depending on your specific needs (upper/lower case)
    const serializedCountries = serializeCountries(selectedCountries, false);

    alert(`Selected Countries: \n ${JSON.stringify(serializedCountries)}`);
  };

  return (
    <div>
      <ContinentCountrySelect
        continents={continents} // Required
        selected={selectedCountries} // Required
        toggleContinent={{
          AF: false,
          AN: false,
          AS: false,
          OC: false,
          EU: true,
          NA: false,
          SA: false
        }} // Not required - by default everything is set to false
        translations={{
          toggleText: 'Toggle',
          notFoundText: 'No countries found.'
        }} // Not required
        customComponent={CountryComponent} // Not required
        onChange={onChange} // Required
      />
      <button type="button" onClick={onSerializeData}>
        Serialize Selected Countries
      </button>
    </div>
  );
};

export default App;
```

---
_Source: https://npm.io/package/react-continent-country-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._