One more issue:

I'd like to use dynamic class names on my region dropdown, but the component only updates when the country or region changes:
https://github.com/benkeen/react-country-region-selector/blob/master/src/rcrs.js#L106

Is there a reason this isn't allowed or can you add an exception for classes here so it updates when they change?

Is it possible to use other html elements rather than so it can be styled?

In order to use the widgets, I must first build it in my node modules folder with gulp? Isn't this a bit counter intuitive (and undocumented?) Why is the default export ./lib/rcrs.js and not ./dist/rcrs.js?

In order to get the updated main path in #1 a new release needs to be pushed out. Would you mind pushing out a new release to include this PR?

Thanks.

I think it would be great to add some props to the RegionDropdown where a list of countries could be specified that override the labelType and valueType props only for those countries.

For example, you could have something like valueTypeCountriesShort={['US']} as well as labelTypeCountriesShort={['US']} to make only the United States show regions using short codes even if the overall setting for valueType and labelType is "full". I don't really know if any other countries use short codes for addresses, but in America it is standard to use short codes for the states, so it would be helpful to have the option of using short codes for American states but full values for all other country regions.

how to set required validation for country and region field

Is there any way to make the select field readOnly? I can't use disabled because I need a selected value submitted. I have a case where what I really need is to make option selection change not available to an end-user, so that the app will select it automatically based on a different decision elsewhere in the form.

Could you add it? :)

Hi there,

I've been using react-country-region-selector in my project, but I'm having trouble figuring out how to properly make an "update" page.

By specs we are not allowed to specify defaultValue, so I was wondering if at the moment this isn't supported. I'd also need to specify a defaultCountry in the region selector.

At the moment I'm using defaultOptionLabel and blankOptionLabel but this breaks the form as the country isn't really selected, only its name is shown.
Same goes for the region selector, which instead is completely broken as the dropdown to change region only works after changing the country.

I'm wondering if I'm using the library in the wrong way or if this is not supported and you'd accept a PR that adds these features.

Here's my current code at the moment for reference 👇

<fieldset disabled={loading} aria-busy={loading}>
                    <label htmlFor="country">
                      Country
                      <CountryDropdown
                        defaultValue={data.user.country}
                        name="country"
                        id="country"
                        value={this.state.country}
                        onChange={val => this.selectCountry(val)}
                        defaultOptionLabel={data.user.country}
                      />
                    </label>
                  </fieldset>
                  <fieldset disabled={loading} aria-busy={loading}>
                    <label htmlFor="region">
                      Region
                      <RegionDropdown
                        defaultValue={data.user.region}
                        name="region"
                        id="region"
                        country={this.state.country}
                        value={this.state.region}
                        onChange={val => this.selectRegion(val)}
                        blankOptionLabel={data.user.region}
                        defaultOptionLabel={data.user.region}
                      />
                    </label>
                  </fieldset>

Any way to use this with the Material UI components?

I believe this is a feature request for functionality not currently supported, but please correct me if I'm mistaken.

I would like to be able to list a set of countries that would appear at the top of the list, separated by a vertical line from the overall alphabetical list. The top list would include the countries that are the most common choices of my users.

For example:

United States
Canada

Afghanistan
Aland Islands
...

The common countries would then be repeated in the list below. I don't believe I can accomplish this with whitelist and blacklist, but let me know if that's a wrong assumption.

Hello!

First I want to thank you for your awesome work. May I request your side to add "Metro Manila" in regions of Philippines? Thanks again.

How to edit the css? I can only edit the general selector style, not other stuff like the arrow, the label, the color of the text after an inserction..

In examples, wrong param region={} for RegionDropdown.
In README, countryValue => country.

<CountryDropdown disabled=true value={country} labelType="short" valueType="short" />

doesn't work

Thanks!

In many instances I often set a shared onChange handler to all inputs in a form, that trigger a common setState function that updates the state based on the input name (this seems to be a common pattern as documented by the (https://facebook.github.io/react/docs/forms.html#handling-multiple-inputs)[React Forms Multiple Components section]). Unfortunately it looks like the actual built-in onChange handler only returns the e.target.value on lines 48 and 169 rather than the full event, breaking this pattern.

Suggesting an update to return the full event as shown in this commit of my fork (doesn't include the re-built files in this commit): https://github.com/SellingPower/react-country-region-selector/commit/47e5e5893f4b12adbe6e41d0a692cef1b2ba3b5b

Happy to put in a PR if this is of interest to you.

Just got burned by this with another lib. The exported "module" version of the rollup should be in es5, containing only import/exports. Double check that's the case because it's what webpack looks at by default.
https://github.com/rollup/rollup/wiki/pkg.module#wait-it-just-means-import-and-export--not-other-future-javascript-features

i want to get the country and region ids from the dropdown list
??

Meh. Can't get the script to update github pages for 1.4.2. Fix!

This was updated to version 1.3.0 on 3/20/18, but hasn't been published to npm.

https://www.npmjs.com/package/react-country-region-selector?activeTab=versions

Hi,

First of all, great lib, thank you!
Secondly, I don't understand what for this library has highlight.js dependency?

Regards,
Jakub.

Would it be possible to take a country and/or state/province that I already have that uses the full names and convert that with this package to the alpha-2 / short value? I want to use the short values in the dropdowns, so I need a way to convert my given address to the short value I can pass to the component. Thoughts?

Hey all, I just released 1.4.1. Please let me know if you run into any problems.

Release notes:

• Breaking change: the library is no longer exported in UMD format. Now only exported in es6 (dist/rcrs.es.js) and commonJS (dist/rcrs.js) format. This library is intended for use in React applications.
• Breaking change: no longer available via Bower. I don't recall ever including a react component used via Bower, so if I'm mistaken here, open a github issue to explain your use-case and I can re-add it. If you need UMD, check out the plain vanilla version.
• country-region-data updated to latest version (1.4.4)
• You can now pass arbitrary attributes to the components (e.g. style={{ color: 'red' }} and have them output in the markup)
• the old gulp build process updated to use rollup.
• this component library, the source data set and the plain vanilla JS version are now all grouped under a single github organization.

Demo here: http://country-regions.github.io/react-country-region-selector/

As you know we've been using this library and it's working pretty well, we created some typings for internal use and would like you to publish them with your packages so others can use them too:

Contra:

• Are you down to ship and maintain them?
• They are not exactly complete You might want to check this
• You re-export country-region-data which has no typings, I had to include them.
  • You might want to consider removing this export actually, if people want access to that list, tell them to import it from the package instead.
• You broke the onChange interface contract (probably not intentionally), by calling onChange with the value of the input as first arg, which prevents me from extending InputHTMLAttributes.

Pro:

• You would make development with your library about 5x easier for anyone using TS.
• You get additional documentation for free

declare module 'react-country-region-selector' {
  import { InputHTMLAttributes } from 'react';

  interface Region {
    name: string;
    shortCode: string;
  }

  interface Country {
    countryName: string;
    countryShortCode: string;
    regions: Region[];
  }

  interface ReactCountryDropdownProps extends InputHTMLAttributes<string> {
    value: string;
    classes?: string;
    showDefaultOption?: boolean;
    defaultOptionLabel?: string | number;
    labelType?: number;
    valueType?: 'short' | 'full';
    whitelist?: string[];
    blacklist?: string[];
  }

  interface ReactRegionDropdownProps extends InputHTMLAttributes<string> {
    country: string;
    value: string | number;
    classes?: string;
    showDefaultOption?: boolean;
    defaultOptionLabel?: string | number;
    labelType?: number;
    countryValueType?: 'short' | 'full';
    whitelist?: string[];
    blacklist?: string[];
    disableWhenEmpty?: boolean;
  }

  class CountryDropdown extends React.Component<ReactCountryDropdownProps> {}
  class RegionDropdown extends React.Component<ReactRegionDropdownProps> {}

  const CountryRegionData: Country[];

  export { CountryDropdown, RegionDropdown, CountryRegionData };
}

Any chance to create some kind of whitelist plus an Not listed, value?

Stuff to do before releasing 1.4:

• Fix build process for building custom build with specific countries.
• Pass-through attributes!
• Rename index.js and index.es.js to rcrs.js and rcrs.es.js respectively.
• Error in examples: "Warning: React does not recognize the showDefaultOption prop on a DOM element. "
• Update README with 1.4 changes.

Cannot find module './source-data.js' from '/Users/Shrihari/projects/Sodastream-UI/node_modules/react-country-region-selector/dist'

My gulp throwing this error

Hi,

This is related to the issue 'onChange returns event.target.value rather than full event #22' which is closed recently. I took the latest version and I'm able to get the event on onChange(). But the event.target doesn't contain the default values like: accessKey, name, etc.
I'm creating multiple RegionDropdown s dynamically.
Here is my method:
<RegionDropdown
accessKey={i}
name={stateSelect}

onChange={(val) => this.selectRegion(val, event)}
selectRegion (value, target) {
console.log("Event-> ", event);

Console:
Event {isTrusted: false, type: "react-change", target: react, currentTarget: react, eventPhase: 2, …}
bubbles:false
cancelBubble:false
cancelable:false
composed:false
currentTarget:react
defaultPrevented:false
eventPhase:2
isTrusted:false
path:[react]
returnValue:true
srcElement:react
target:react
timeStamp:192776.21000000002
type:"react-change"
proto:Event

Target Object:
target:react
accessKey:""
assignedSlot:null
attributes:NamedNodeMap {length: 0}
baseURI:"http://localhost:3000/myApp"
childElementCount:0
childNodes:[]
children:[]
classList:[value: ""]
className:""

Thanks in Advance,
Sandy

Hi,

I noticed that any page that has the region selector included is not rendering properly in IE 11 and will break the page. The react country selector demos at http://benkeen.github.io/react-country-region-selector/ are breaking in IE 11 too.

On the website I am developing I am getting the following error in the IE console:

Unable to get property 'nextSibling' of undefined or null reference

Any ideas on how I can work around this?

can you please pass-through that attribute?

Where datas come from ?

Correct spelling is Vietnam

onChange method working fine.
but, onBlur method not working in CountryDropdown and RegionDropdown.

is any way to use onblur ?

Howdy, just wanted to say thanks—this library was exactly what I needed, and so well written to be composable and easy to apply my own styles. Dropped it into my project and everything worked instantly! 👏

Hello, I need to know if one of the following is possible or not:

• Add our own custom options to the dropdown list.
• Get the region list based on the country selected. If this is possible I can push the custom options to the region list and then render it inside the select tag.

For example: I need to add National in the region dropdown:

I could not find anything related to my above problem in the docs.

Thanks

https://github.com/andreypopp/reactify

They recommend switching to babelify. It's also drawing in react-tools, which leads to an NPM warning:

npm WARN deprecated [email protected]: react-tools is deprecated. For more information, visit https://fb.me/react-tools-deprecated

I have this package (which has been great outside of this one quirk - thank you) implemented, and it's not displaying a selected option when a value is passed into the component.

<CountryDropdown
    valueType="short"
    whitelist={Constants.countriesList}
    value={this.state.country}
    onChange={(val) => this.selectCountry(val)}
/>

In the above example, I have confirmed that this.state.country is equal to "US", and the select has an option with a value of "US" after setting valueType="short".

The RegionDropdown correctly shows a list of US states, but has the same issue as the CountryDropdown in that it displays the default 'Select Region' value as opposed to showing a selected state option.

Note (for clarity) that everything works fine when selecting new/different options - I'm only talking about displaying the proper selected option when the page loads, which is a common use-case when editing data.

I'm trying to remove the border-radius of the dropdown but I can't seem to do it.
I'm trying border-radius: unset and it overrides the default 5px but the component doesn't change

I'm trying to upgrade to React v16 and I'm running into the issue described here:
https://stackoverflow.com/questions/46466253/migration-to-react-16-0-0-error-cannot-find-module-react-lib-reactcomponenttre

I get the output below when I run yarn list react and yarn list react-dom respectively:

$ yarn list react
yarn list v1.2.1
warning Filtering by arguments is deprecated. Please use the pattern option instead.
├─ [email protected]
│  └─ [email protected]
└─ [email protected]
✨  Done in 1.08s.

$ yarn list react-dom
yarn list v1.2.1
warning Filtering by arguments is deprecated. Please use the pattern option instead.
├─ [email protected]
│  └─ [email protected]
└─ [email protected]
✨  Done in 1.12s.

Should react-country-region-selector be specifying react as a peerDependency?

I am using the selector to populate a list of countries. the user should be able to pick each country once and only once. I was going to use the blacklist to facilitate this, but ran into a problem;

right now, if I want to use full names in my data store, but want to blacklist selected values I need to somehow retrieve the short name based on the full name from the raw data.

It seems logical that if I am using the full names, the blacklist should operate from the full name as well.

Could you publish a version of react-country-region-selector with the latest data from country-region-data? My PR to add Metro Manila for the Philippines was merged recently country-regions/country-region-data#34

Link to the Github package here https://www.npmjs.com/package/react-country-region-selector leads to a dead URL.

Just wondering when that will happen :)

Hey guys, how do you build? There's no build command inside the package.json and no gulpfile as specified by the README.