UNPKG

flagstrap-preact

Version:

Flagstrap jquery plugin version for Preact

64 lines (37 loc) 1.76 kB
## `<Flagstrap />` for Preact A dropdown component that makes it possible to choose a country from a [list](https://github.com/bboydflo/flagstrap-preact/blob/master/src/js/countries.js). This component is suited only together with Bootstrap 3 styles and is a direct port of the [following plugin](https://github.com/blazeworx/flagstrap) ## Installation ```sh $ npm install flagstrap-preact ``` > Make sure to enable transpilation for this module! Check [.babelrc](https://github.com/bboydflo/flagstrap-preact/blob/master/.babelrc) and [webpack configuration](https://github.com/bboydflo/flagstrap-preact/blob/master/https://github.com/bboydflo/flagstrap-preact/blob/master/webpack.config.js) if you have troubles. ## Usage Example ```js const onChanged = (countryCode) => { console.log('new selected country: ', countryCode); } <Flagstrap countries={ 'AF': 'Afghanistan', 'AL': 'Albania', 'DZ': 'Algeria', 'AS': 'American Samoa' } choose={'Choose language'} onChange={onChanged} /> ``` #### Demo <img alt="preview" src="https://github.com/bboydflo/flagstrap-preact/blob/master/flagstrap-preact.gif" width="720"> --- ## Props | Prop | Type | Description | |---------------------|------------|---------------------| | **`countries`** | _Object_ | Object containing country code as keys and country names as values | **`choose`** | _String_ | Default dropdown label. | **`selected`** | _String_ | Default selected country code | **`onChange`** | _Function_ | Prop to handle dropdown change outside of Flagstrap component --- ### License [MIT] [MIT]: http://choosealicense.com/licenses/mit/