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

Comparing version 0.0.2 to 1.0.0

bower.json

 {
 	"name": "react-country-region-selector",
-	"version": "0.0.1",
-	"main": "dist/crs.min.js",
+	"main": "dist/rcrs.min.js",
+	"description": "CountryDropdown and RegionDropdown React components for your forms.",
+	"authors": ["Ben Keen <[e-mail]>"],
 	"license": "MIT",
+	"moduleType": [
+		"amd",
+		"globals",
+		"node",
+		"es6"
+	],
 	"ignore": [
 		".gitignore",
 		"*.md",
-		"gruntfile.js",
+		"gulpfile.js",
 		"LICENSE",
 		"package.json",
-		"bower.json"
+		"bower.json",
+		"me.md",
+		"src/",
+		"node_modules/",
+		"examples/"
 	],
@@ -26,3 +37,3 @@ "devDependencies": { },
 		"select boxes"
-	]
+	],
 }

package.json

 {
   "name": "react-country-region-selector",
-  "version": "0.0.2",
-  "description": "A simple, configurable React component that lets you add a country dropdown that automatically updates a corresponding region dropdown in your forms.",
+  "version": "1.0.0",
+  "description": "CountryDropdown and RegionDropdown React components for your forms.",
   "main": "dist/rcrs.js",
@@ -14,5 +14,13 @@ "scripts": {
   "keywords": [
+    "country",
     "countries",
     "regions",
-    "dropdowns"
+    "states",
+    "provinces",
+    "counties",
+    "territories",
+    "forms",
+    "dropdowns",
+    "select boxes",
+    "react-component"
   ],
@@ -25,20 +33,27 @@ "author": "Ben Keen",
   },
+  "browserify-shim": {
+    "react": "global:React"
+  },
+  "browserify": {
+    "transform": [
+      "reactify"
+    ]
+  },
+  "dependencies": {
+    "highlight.js": "^9.4.0",
+    "react": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "reactify": "^1.1.1"
+  },
   "devDependencies": {
-    "babel-plugin-transform-es2015-modules-umd": "^6.8.0",
-    "babel-plugin-transform-react-jsx": "^6.8.0",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-react": "^6.5.0",
-    "babelify": "^7.3.0",
-    "country-region-data": "1.2.1",
-    "grunt": "~0.4.0",
-    "grunt-babel": "^6.0.0",
-    "grunt-browserify": "^5.0.0",
-    "grunt-contrib-copy": "~0.4.1",
-    "grunt-contrib-uglify": "~0.3.2",
-    "grunt-template": "~0.2.3",
-    "load-grunt-tasks": "^3.5.0",
-    "react": "^15.0.2",
-    "react-dom": "^15.0.2",
-    "underscore": "^1.8.3"
+    "country-region-data": "^1.3.0",
+    "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-component-gulp-tasks": "^0.7.7",
+    "run-sequence": "^1.2.1",
+    "yargs": "^4.7.1"
   }
 }

README.md

@@ -1,14 +0,35 @@
-## React-Country-Region-Selector
+# React-Country-Region-Selector
 
-> Incomplete! This isn't finished yet. 
+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).
 
-### Demo
+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.
 
-You can see it in action here: [...]
 
+### Examples
+
+Check out the [github pages](http://benkeen.github.io/react-country-region-selector/) section for some examples + example
+JSX code.
+
+
+### Requirements
+
+- React (tested with 15.1.0, but should work on earlier versions).
+- If you want to run the repo locally (e.g. generated 
+
+
 ### Installation
 
-Depending on your setup, pick one of the following. 
+Ah, modern web development: so many choices! Here's how to install it with the most common build tools:
 
-1. Installing via npm
+#### npm
 
@@ -19,3 +40,3 @@ ```javascript
 
-2. Use Bower
+#### Bower
 
@@ -26,40 +47,25 @@ ```javascript
 
-3. Alternatively, you can just use the UMD version of the file. That'll work for AMD, CommonJS or just plain old 
-non-namespaced JS code. For the latter, it'll expose a `window.rsrc` object.
+#### UMD (Universal Module Definition)
 
-The scripts only dependency is React (tested with 15.0.1, but should work on earlier versions).
+Just use the `dist/rcrs.min.js` file. 
 
 
+
 ### Usage
 
-Using it is really simple. Here are a few examples in a few of the more common formats JS is taking.
+Here are a few examples in a few different formats. 
 
-- AMD Example
-- CommonJS Example
-- ES6 with JSX Example
-- ES6 Example
+- [ES6 with JSX](#es6)
+- [ES5 with JSX](#es5)
+- [AMD](#amd)
 
 
-#### AMD Example
+#### ES6 with JSX example
 
-```javascript
-define([
-    'react',
-    'react-country-region-selector'
-], function (React, rcrs) {
+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. 
 
-    var CountryDropdown = rcrs.CountryDropdown;
-    var RegionDropdown = rcrs.CountryDropdown;
 
-});
-
-```
-
-
-#### CommonJS example
-
-
-#### ES6 with JSX example
-
 ```javascript
+import React from 'react';
 import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';
@@ -99,6 +105,88 @@
 
-#### ES6 example
+#### ES5 with JSX
 
+```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.
 
+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
@@ -108,6 +196,24 @@
 
-| Parameter | Required? | Type | Description |
+| Parameter | Required? | Default | Type | Description |
 |:---|:---:|:---|:---|
-| value | Yes | `string` | The currently selected country. |
-| onChange | Yes | `Function` | Callback that gets called when the user selects a country. |
+| value | Yes | `""` | `string` | The currently selected country. This should either be the shortcode, or the full 
+country name depending on what you're using for your value attribute (see the `valueType` option). By default it's 
+the full country name.|
+| onChange | Yes | - | `function` | Callback that gets called when the user selects a country. Use this to store the 
+value in whatever store you're using (or just the parent component state). |
+| name | No | `"rcrs-country"` | `string` | The name attribute of the generated select box. |
+| id | No | `""` | `string` | The ID of the generated select box. Not added by default. |
+| classes | No | `""` | `string` | Any additional space-separated classes you want to add. |
+| showDefaultOption | No | `true` | `boolean` | Whether you want to show a default option. |
+| defaultOptionLabel | No | `"Select Country"` | `string` | The default option label. |
+| labelType | No | `"full"` | `string` | Either `"full"` or `"short"`. This governs whether you see country names or 
+country short codes in the dropdown. |
+| 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. |
+| blacklist | No | `[]` | `array` | Lets you target countries that should *not* appear in the dropdown. Should also 
+be an array of country shortcodes. |
 
@@ -117,12 +223,51 @@
 
-| Parameter | Required? | Type | Description |
+| Parameter | Required? | Default | Type | Description |
 |:---|:---:|:---|:---|
-| country | Yes | `string` | The currently selected country option value. |
-| value | Yes | `string` | The currently selected region option value. |
-| onChange | Yes | `Function` | Callback that gets called when the user selects a region. |
+| countryValue | Yes | `""` | `string` | The currently selected country. |
+| value | Yes | `""` | `string` | The currently selected region. |
+| onChange | Yes | - | `function` | Callback that gets called when the user selects a region. Use this to store the 
+value in whatever store you're using (or just the parent component state). |
+| name | No | `"rcrs-region"` | `string` | The name attribute of the generated select box. |
+| id | No | `""` | `string` | The ID of the generated select box. Not added by default. |
+| classes | No | `""` | `string` | Any additional space-separated classes you want to add. |
+| blankOptionLabel | No | `-` | `string` | The label that appears in the region dropdown when the user hasn't selected
+a country yet.|
+| showDefaultOption | No | `true` | `boolean` | Whether you want to show a default option. This is what the user sees 
+in the region dropdown after selecting a country. It defaults to the `defaultOptionLabel` setting (see next). |
+| defaultOptionLabel | No | `Select Region` | `string` | The default region option. |
+| onChange | No | `-` | `function` | Called when the user selects a region. Use this to store the region value. |
+| countryValueType | No | `full` | `string` | If you've changed the country dropdown `valueType` to `short` you will need to
+set this value to `short` as well, so the component knows what's being passed in the `country` property. |
+| labelType | No | `"full"` | `string` | Either `"full"` or `"short"`. This governs whether you see region names or 
+region short codes in the dropdown. |
+| valueType | No | `"full"` | `string` | Either `"full"` or `"short"`. This controls the actual `value` attribute of 
+each `<option>` in the dropdown.  |
+| disableWhenEmpty | No | `false` | `boolean` | Disables the region field when the user hasn't selected a country. |
 
 
+### Other Stuff
+
+- *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. 
+
+
+### 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.
+
+
 ### Changelog
 
-- `0.1.0` - Under development.
+- `1.0.0` - *July 1, 2016* - initial version.
 
@@ -129,0 +274,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

9

decreased by-43.75%

Number of package files

32

increased by60%

Number of lines in readme file

273

increased by113.28%

Worsened metrics

Total package byte prevSize

1404835

decreased by-40.9%

Dependency count

4

increased byInfinity%

Number of low license alerts

1

increased byInfinity%

Lines of code

25197

decreased by-9.7%

Number of low supply chain risk alerts

437

increased by5362.5%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedhighlight.js@^9.4.0

• + Addedreact@^15.1.0

• + Addedreact-dom@^15.1.0

• + Addedreactify@^1.1.1

• + Addedacorn@5.7.4(transitive)

• + Addedamdefine@1.0.1(transitive)

• + Addedasap@2.0.6(transitive)

• + Addedast-types@0.9.6(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbase62@0.1.1(transitive)

• + Addedbrace-expansion@1.1.11(transitive)

• + Addedcommander@2.20.3(transitive)

• + Addedcommoner@0.10.8(transitive)

• + Addedconcat-map@0.0.1(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcreate-react-class@15.7.0(transitive)

• + Addeddefined@1.0.1(transitive)

• + Addeddetective@4.7.1(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedesprima@3.1.3(transitive)

• + Addedesprima-fb@13001.1001.0-dev-harmony-fb(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedglob@5.0.15(transitive)

• + Addedgraceful-fs@4.2.11(transitive)

• + Addedhighlight.js@9.18.5(transitive)

• + Addediconv-lite@0.4.240.6.3(transitive)

• + Addedinflight@1.0.6(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjstransform@10.1.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedminimatch@3.1.2(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedmkdirp@0.5.6(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedpath-is-absolute@1.0.1(transitive)

• + Addedprivate@0.1.8(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedq@1.5.1(transitive)

• + Addedreact@15.7.0(transitive)

• + Addedreact-dom@15.7.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedreact-tools@0.13.3(transitive)

• + Addedreactify@1.1.1(transitive)

• + Addedrecast@0.11.23(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedsource-map@0.1.310.5.7(transitive)

• + Addedthrough@2.3.8(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• + Addedwrappy@1.0.2(transitive)