react-country-picker
v1.0.3
Published
This package uses Chakra UI component library
Downloads
117
Readme
This package uses Chakra UI component library
Example:
import {CountryPicker} from 'react-country-picker';
const DEFAULT_COUNTRY = 'lt';
function App() {
// you can use null if you don't want default selected country
const [country, setCountry] = useState(DEFAULT_COUNTRY);
return (
<CountryPicker
selectedCountry={country}
setSelectedCountry={setCountry}
flagsInMenu={true}
placeholder={"Choose a country"}
/>
);
}
Props:
falgsInMenu={true} //default <false> - to display flags icons in dropdown menu
placeholder={"Choose something"} //default <"Select a country"> - change your placeholder
countries={[{name: "Lithuania", code: "lt"}]} //default <All countries> - You can use your custom countries array
buttonStyles={{height: theme.space[15]}} // styles for selector button
buttonFlagStyles={{height: theme.space[4]}} // styles for flag icon inside selector
buttonPlaceholdertSyles={{fontSize: theme.space[5]}} // styles for placeholder
menuStyles={{height: theme.space[50]}} // dropdown menu styles
menuItemStyles={{height: theme.space[10]}} // styles for dropdown menu items
menuItemFlagStyles={{height: theme.space[5]}} // styles for dropdown menu items flags icons
menuItemTextStyles={{height: theme.space[15]}} // styles for dropdown menu items texts
menuItemProps={{closeOnSelect: false}} // chakra props for menu items
Enjoy :)