Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-bootstrap-country-select
Advanced tools
Readme
A country select component with flag icons for React Bootstrap.
Go to the demos page to see it in action.
yarn add react-bootstrap-country-select
or
npm install react-bootstrap-country-select
React Bootstrap must be installed and the Bootstrap CSS imported (or included).
In your index.js
or similar:
import 'bootstrap/dist/css/bootstrap.css'; // or include from a CDN
import 'react-bootstrap-country-select/dist/react-bootstrap-country-select.css';
Your component:
import React, { useState } from 'react';
import CountrySelect from 'react-bootstrap-country-select';
const MyComponent = () => {
const [ value, setValue ] = useState(null);
return (
<CountrySelect
value={value}
onChange={setValue}
/>
);
};
sm
) and large (lg
) sizes are supportedProperty | Type | Default | Description |
---|---|---|---|
value | object | string | The current value: a country object, country ID or null. See valueAs . | |
onChange | function | A callback fired when a country is selected or unselected. The argument is the country object, country ID or null. | |
onTextChange | function | A callback fired when the input text changes. The first argument is the text value and the second argument is the input's change event object. | |
countries | array | An array of country objects used to populate the country list. Provide this if you'd like to use your own countries data. A country object has the properties: id , name , flag , alpha2 , alpha3 and ioc . | |
exclusions | array | An array of country IDs that defines the countries to be excluded from the country list. | |
additions | array | Additional countries in the same format as countries . | |
valueAs | object | id | object | Determines if value is a country object or an ID string. |
flags | boolean | true | Flags are displayed when true and not displayed when false . |
flush | boolean | true | When true the selected country flag appears in the input. When false it is rendered using <InputGroup.Text/> . |
disabled | boolean | false | Disables the country select. |
placeholder | string | "Type or select country..." | Placeholder text displayed in empty input. |
noMatchesText | string | "No matches" | The text displayed when no countries match the entered input text. |
size | 'sm' | 'lg' | Input size variants, for compatibility with other Bootstrap form components. | |
listMaxHeight | number | Maximum pixel height of the list overlay. | |
sort | function | A custom sort function that determines the order of the country list. The function's two arguments country objects. | |
matchNameFromStart | boolean | true | If true autosuggest matches country names from the start of the string. |
matchAbbreviations | boolean | false | If true autosuggest matches against alpha2, alpha3 and IOC abbreviations in addition to country names. |
countryLabelFormatter | function | A custom country list item formatter. The argument is a country object. | |
throwInvalidValueError | boolean | false | If true an error is thrown if the provided value does not match a country. |
| formControlProps
| object
| | Properties applied to the <FormControl/>
input. |
| overlayProps
| object
| | Properties applied to the overlay <div>
element that contains the country list. |
| classPrefix
| string
| 'country-select'
| Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized CSS. |
For further documentation and live examples visit the website.
If you have a usage query or feature request please create an issue.
Copyright (c) 2020 Jason Wilson
FAQs
A country select component with flag icons for React Bootstrap.
The npm package react-bootstrap-country-select receives a total of 201 weekly downloads. As such, react-bootstrap-country-select popularity was classified as not popular.
We found that react-bootstrap-country-select demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.