1.0.3 • Published 3 years ago

react-country-picker v1.0.3

Weekly downloads
-
License
-
Repository
-
Last release
3 years ago

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 :)