Socket
Socket
Sign inDemoInstall

react-country-region-selector

Package Overview
Dependencies
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-country-region-selector - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/rcrs.es.js
dist/rcrs.es.js.map
dist/rcrs.js.map

97

package.json
{
"name": "react-country-region-selector",
"version": "1.3.0",
"version": "1.4.0",
"description": "CountryDropdown and RegionDropdown React components for your forms.",
"main": "lib/rcrs.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "benkeen",
"license": "MIT",
"repository": {

@@ -13,50 +11,57 @@ "type": "git",

},
"keywords": [
"country",
"countries",
"regions",
"states",
"provinces",
"counties",
"territories",
"forms",
"dropdowns",
"select boxes",
"react-component"
],
"author": "Ben Keen",
"license": "MIT",
"readmeFilename": "README.md",
"bugs": {
"url": "https://github.com/benkeen/react-country-region-selector/issues"
"main": "dist/rcrs.js",
"module": "dist/rcrs.es.js",
"jsnext:main": "dist/rcrs.es.js",
"engines": {
"node": ">=8",
"npm": ">=5"
},
"browserify-shim": {
"react": "global:React"
"scripts": {
"test": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"build": "rollup -c",
"start": "rollup -c -w",
"prepare": "npm run build",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build"
},
"browserify": {
"transform": [
"reactify"
]
},
"peerDependencies": {
"prop-types": "^15.5.4",
"react": "^15.0.0 || ^16.0.0",
"react-dom": "^15.0.0 || ^16.0.0"
},
"dependencies": {
"prop-types": "^15.5.8",
"reactify": "^1.1.1"
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.5",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"country-region-data": "1.4.4",
"cross-env": "^5.1.4",
"eslint": "^5.0.1",
"eslint-config-standard": "^11.0.0",
"eslint-config-standard-react": "^6.0.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.0",
"eslint-plugin-react": "^7.10.0",
"eslint-plugin-standard": "^3.1.0",
"gh-pages": "^1.2.0",
"minimalist": "^1.0.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts": "^1.1.4",
"rollup": "^0.64.1",
"rollup-plugin-babel": "^3.0.7",
"rollup-plugin-commonjs": "^9.1.3",
"rollup-plugin-json": "^3.0.0",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
"rollup-plugin-postcss": "^1.6.2",
"rollup-plugin-url": "^1.4.0"
},
"devDependencies": {
"country-region-data": "^1.4.2",
"gulp": "^3.9.1",
"gulp-param": "^1.0.3",
"gulp-rename": "^1.2.2",
"gulp-template": "^4.0.0",
"gulp-util": "^3.0.7",
"react": "^15.6.1",
"react-component-gulp-tasks": "^0.7.7",
"react-dom": "^15.6.1",
"run-sequence": "^1.2.1",
"yargs": "^4.7.1"
}
"files": [
"dist"
]
}

240

README.md

@@ -1,72 +0,79 @@

# React-Country-Region-Selector
# react-country-region-selector
A feature you often need in forms is a connected country and region dropdown, where the region field gets automatically
updated when the user selects a country. Coding this is easy of course, but it's a royal pain having to track down all
the raw country-region data. This script contains a pair of components to let you add this feature quickly and easily to your
forms. It's the React version of [this script](https://github.com/benkeen/country-region-selector).
- [About](#about)
- [Features](#features)
- [Gotchas](#gotchas)
- [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [List of component options](#options)
- [Command-line](#command-line)
- [Changelog](#changelog)
- [Thanks!](#thanks)
- [License](#license) (spoiler: MIT!)
It's pretty versatile:
- Has two separate components (`<CountryDropdown />`, `<RegionDropdown>`) that you can embed in your
DOM wherever you need. That sounded like a vulgar euphemism, but it wasn't, honest.
- Let's you customize the list of countries that appears via a whitelist, blacklist, or even custom build to keep file
size down.
- Works as ES6 module, commonJS, AMD, whatever you fancy.
- [Lots of options](#options) for the most common use-cases, allowing you style is as you need (via classes/IDs),
change name attributes, add you own custom onChange handlers to do whatever you want etc.
------------------
<a name="about"></a>
### About
### Examples
This library provides a pair of React components to display a connected country and region dropdown in your form containing
country and region data. If you're not using React, check out the
[plain vanilla JS version](https://github.com/country-regions/country-region-selector).
Check out the [github pages](http://benkeen.github.io/react-country-region-selector/) section for some examples + example
JSX code.
The list of countries and regions is maintained separately and found in the
[country-region-data](https://github.com/country-regions/country-region-data) repo.
### Requirements
<a name="features"></a>
#### Features
- React (tested with 15.1.0, but should work on earlier versions).
- If you want to run the repo locally (e.g. generated
It's pretty versatile.
- There are two separate components (`<CountryDropdown />`, `<RegionDropdown>`) that you can embed in your
DOM wherever you need. That sounded like a vulgar euphemism, but it wasn't, honest.
- The source data used by the library is also exposed, should you need it.
- It let's you customize the list of countries that appears via a whitelist, blacklist.
- [A lot of options](#options) are provided, for things like styling, event callbacks and so on.
- To keep file sizes down you have the option of creating a custom build of the library containing only a list of
those countries you want to show up. See [command line options](#command-line) for more info.
### Installation
Ah, modern web development: so many choices! Here's how to install it with the most common build tools:
<a name="gotchas"></a>
#### Gotchas
#### npm
- *Page charset*: some country names contain UTF-8 chars, so your page will need an appropriate charset to handle them.
If you see some invalid characters appearing in the dropdown, make sure you have UTF-8 specified in your page
<code>&lt;head&gt;</code>, like so: ```<meta charset="UTF-8">```
- *Return values*: on an onChange event `event.target.value` is returned as the first value and the full `event` as the second.
```javascript
npm install react-country-region-selector --save
```
#### Bower
<a name="demo"></a>
### Demo
```javascript
bower install react-country-region-selector
```
Check out the [github pages](http://country-regions.github.io/react-country-region-selector/) section for some examples + example
JSX code.
#### UMD (Universal Module Definition)
Just use the `dist/rcrs.min.js` file.
<a name="examples"></a>
### Installation
```javascript
npm i -D react-country-region-selector
```
<a name="features"></a>
### Usage
Here are a few examples in a few different formats.
It's very easy to use, but note that you will need to track the country and region value somewhere - either in your
component state or off in a store somewhere. Here's a simple example that uses state:
- [ES6 with JSX](#es6)
- [ES5 with JSX](#es5)
- [AMD](#amd)
#### ES6 with JSX example
I figure people *not* using JSX will know how to remove the JSX from the code below, if not open a ticket and I'll
write up a non-JSX example too.
```javascript
import React from 'react';
import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';
// note that you can also export the source data via CountryRegionData. It's in a deliberately concise format to
// keep file size down
import { CountryDropdown, RegionDropdown, CountryRegionData } from 'react-country-region-selector';
class Example extends React.Component {

@@ -103,90 +110,9 @@ constructor (props) {

#### ES5 with JSX
<a name="options"></a>
### Options
```javascript
// Up to you to include React + the react-country-region-selector (script tags, commonJS, whatever).
// That's a choice you need to make with your build setup.
These are the attributes that can be explicitly passed to the two components. _Note: any other arbitrary attributes will be
added to the actual DOM element._
var Example = React.createClass({
getInitialState: function () {
return {
region: '',
country: '',
};
},
selectCountry: function (val) {
this.setState({ country: val });
},
selectRegion: function (val) {
this.setState({ region: val });
},
render () {
return (
<div>
<CountryDropdown
value={this.state.country}
onChange={this.selectCountry} />
<RegionDropdown
country={this.state.country}
value={this.state.region}
onChange={this.selectRegion} />
</div>
);
}
}
```
#### AMD
```javascript
define([
'react',
'react-country-region-selector'
], function (React, rcrs) {
var CountryDropdown = rcrs.CountryDropdown;
var RegionDropdown = rcrs.CountryDropdown;
var Example = React.createClass({
getInitialState: function () {
return {
region: '',
country: '',
};
},
selectCountry: function (val) {
this.setState({ country: val });
},
selectRegion: function (val) {
this.setState({ region: val });
},
render () {
return (
<div>
<CountryDropdown
value={this.state.country}
onChange={this.selectCountry} />
<RegionDropdown
country={this.state.country}
value={this.state.region}
onChange={this.selectRegion} />
</div>
);
}
}
return Example;
});
```
### Options
```<CountryDropdown />```

@@ -206,3 +132,3 @@

| valueType | No | `"full"` | `string` | Either `"full"` or `"short"`. This controls the actual `value` attribute of each `<option>` in the dropdown. Please note, if you set this to `"short"` you will need to let the corresponding `<RegionDropdown />` component know as well, by passing a `countryValueType="short"` attribute. |
| whitelist | No | `[]` | `array` | This setting lets you target specific countries to appear in the dropdown. Only those specified here will appear. This should be an array of country shortcodes. See the [country-region-data](https://github.com/benkeen/country-region-data) repo for the data and the shortcodes. |
| whitelist | No | `[]` | `array` | This setting lets you target specific countries to appear in the dropdown. Only those specified here will appear. This should be an array of country shortcodes. See the [country-region-data](https://github.com/country-region-data/country-region-data) repo for the data and the shortcodes. |
| blacklist | No | `[]` | `array` | Lets you target countries that should *not* appear in the dropdown. Should also be an array of country shortcodes. |

@@ -230,31 +156,31 @@ | disabled | No | `false` | `boolean` | Disables the country field. |

| disableWhenEmpty | No | `false` | `boolean` | Disables the region field when the user hasn't selected a country. |
| disabled | No | `false` | `boolean` | Disables the region field. If set to true, it overrides `disableWhenEmpty` |
| disabled | No | `false` | `boolean` | Disables the region field. If set to true, it overrides `disableWhenEmpty` |
### Other Stuff
<a name="command-line"></a>
### Command-line
- *Page charset*: your page will need an appropriate charset to handle UTF-8 chars used in some country names. So if
you see some invalid characters appearing in the dropdown, make sure you have UTF-8 specified in your page
<code>&lt;head&gt;</code>, like so: ```<meta charset="UTF-8">```
- *Data source*: the list of countries and regions is maintained separately and pulled from the
[country-region-data](https://github.com/benkeen/country-region-data) repo.
- *Return values*: on an onChange event `event.target.value` is returned as the first value and the full `event` as the second.
Check out the `scripts` section of the package.json file to see them all, but these are the higlights:
- `npm start` - regenerate everything, plus a watcher for local development.
- `npm build` - build the dist files again. No watcher.
- `rollup -c --config-countries=UK,US` - generate a custom build of the script `/dist` folder containing only those
countries you specify here. This *seriously* reduces file size, so if you can do it, do it.
### Gulp commands
- `gulp` - regenerate everything.
- `gulp --countries="UK,US"` - generate a custom build of the script in the `/lib` and `/dist` folder containing only those
countries you specify here. This *seriously* reduces file size (60KB down to as small as 16KB), so if you can do it, do it.
### Other
This repo uses the extremely handy [react-component-gulp-tasks](https://github.com/JedWatson/react-component-gulp-tasks)
script for doing most of the gulp tasks (ES6, JSX conversion, UMD file creation, minifications, watchers, etc.).
Big thanks to Jed Watson there.
<a name="changelog"></a>
### Changelog
- `1.4.0` - Sept 8, 2018:
- *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 ANY react component used via Bower, so if I'm
mistaken here, open a github issue to explain you use case and I can re-add it.
If you need UMD, check out the []plain vanilla version](https://github.com/country-regions/country-region-selector).
- 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.
- `1.3.0` - Mar 20, 2018. Bug fix for invalid country, [@n-david](https://github.com/n-david)! onBlur event added.

@@ -272,4 +198,14 @@ - `1.2.3` - Nov 7, 2017. Country data updates. React moved to peer dependency, thanks [@iamdey](https://github.com/iamdey)!

<a name="thanks"></a>
### Thanks!
Big thanks to a whole boatload of people:
- contributors to this project and the source data.
- Special thanks to the [create-react-library](https://github.com/transitive-bullshit/create-react-library) tool which
I use here (un-ejected) to rollup this component library. Great stuff.
<a name="license"></a>
### License
MIT.
bower.json
dist/rcrs.min.js
examples/dist/bundle.js
examples/dist/common.js
examples/dist/css/github-light.css
examples/dist/css/normalize.css
examples/dist/css/stylesheet.css
examples/dist/examples.js
examples/dist/index.html
examples/dist/libs/highlight/highlight.pack.js
examples/dist/libs/highlight/monokai-sublime.css
examples/dist/libs/highlight/railscasts.css
examples/dist/standalone.js
examples/src/css/github-light.css
examples/src/css/normalize.css
examples/src/css/stylesheet.css
examples/src/examples.js
examples/src/index.html
examples/src/libs/highlight/highlight.pack.js
examples/src/libs/highlight/railscasts.css
gulpfile.js
lib/rcrs.js
lib/source-data.js
LICENSE
me.md
src/rcrs.js
src/source-data.js
src/templates/source-data.template
dist/rcrs.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc