diff --git a/.gitignore b/.gitignore index ecbcd40..102adfb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,38 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# Dependencies node_modules +.pnp +.pnp.js + +# Local env files +.env +.env.local +.env.development.local +.env.test.local +.env.production.local + +# Testing +coverage + +# Turbo +.turbo + +# Vercel +.vercel + +# Build Outputs +.next/ +out/ +dist + + +# Debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* +# Misc .DS_Store -.idea/* +*.pem diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..12419e9 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v20.18.1 \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..67e6888 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,101 @@ +## Changelog + +- `4.0.6` - Feb 5, 2026 + - Upgrade country-region-data to 4.1.0 + +- `4.0.5` - Dec 18, 2025 + - Removed incorrect console.log: https://github.com/country-regions/react-country-region-selector/issues/180 + +- `4.0.4` - Dec 2, 2025 + - Upgrade country-region-data to 4.0.0 + +- `4.0.3` - Oct 22, 2025 + - Upgrade country-region-data to 3.2.0. + +- `4.0.2` - Dec 26, 2024 + - Fix to handling sorting country names with UTF-8 chars properly. + - Fix for priority options no longer being listed first. + - Fix for region blacklist not working properly. + - New doc page added for Performance, and various doc pages updated. + +- `4.0.1` - Dec 8, 2024 + - Fix to sort dropdowns alphabetically, not just based on order from data set. + - Fix to properly handle missing region short codes. + +- `4.0.0` - Dec 8, 2024 + - Breaking changes: + - Minimum react version updated to 16.8.0 (hooks) + - `classes` prop has been renamed `className` + - `onBlur` callback is no longer passed the selected value as first argument, just the event + - Improvements: + - completely rewritten in modern react and typescript, plus a new dev environment for working locally + - [greatly improved documentation](https://country-regions.github.io/react-country-region-selector/) + - now supports integrations with third party component library (Material UI, Fluent UI etc.) + - bundle size now 72KB (previously 88KB) + +- `3.7.0` - Nov 21, 2024 + - Upgrade country-region-data to 3.1.0. +- `3.6.1` - Aug 3, 2022 + - Dependency version fix. +- `3.6.0` - Aug 2, 2022 + - React 18 support added. +- `3.5.0` - Jul 30, 2022 + - Upgrade country-region-data to 2.6.0. +- `3.4.0` - Oct 24, 2021 + - Typings fix. + - Upgrade country-region-data to 1.11.0. +- `3.3.0` - Aug 17, 2021 + - Upgrade country-region-data to 1.10.0. +- `3.2.0` - Jul 30, 2021 + - Upgrade country-region-data to 1.9.0. +- `3.1.0` - May 11, 2021 + - React 17 support added, thanks [madhums](https://github.com/madhums)! +- `3.0.2` - Jan 18, 2021 + - typings file fix. +- `3.0.1` - Sep 26, 2020 + - typings file fix. +- `3.0.0` - Sep 8, 2020 + - blacklist option added for the Region component (thanks [Mitch Rickman](https://github.com/mitch-rickman)!) + - typings fix and onBlur callback standardized with value passed as first param, with full event as second. This + is a _breaking change_. Thanks [Vinod Ramakrishnan](https://github.com/vinod-rp)! +- `2.1.0` - Mar 28, 2020 + - country-region-data updated to 1.6.0 +- `2.0.0` - Mar 21, 2020 + - Typings fixes + - Dependency updates +- `1.4.7` - Dec 24, 2019: + - Fix to include typings in published bundle. +- `1.4.6` - Dec 22, 2019: + - Typescript typings added. Thanks, [Kyle Davis](https://github.com/kyledavisdev)! + - [country region data](https://github.com/country-regions/country-region-data) updated to 1.5.1 +- `1.4.5` - Oct 9, 2019. + - [country region data](https://github.com/country-regions/country-region-data) updated to 1.5.0 + - RegionDropdown component updates to refactor deprecated componentWillReceiveProps method + - misc dependency updates +- `1.4.4` - Aug 2, 2019. Country data updates. +- `1.4.3` - Dev 2, 2018: + - RegionDropdown converted to PureComponent; now updates on any prop change + - [country region data](https://github.com/country-regions/country-region-data) updated to 1.4.5 +- `1.4.2` - Nov 8, 2018: + - `customOptions` setting added for the Region dropdown. + - `priorityOptions` option added to the CountryDropdown to allow placing items at the top of the country dropdown. +- `1.4.1` - Sept 9, 2018: bug fix for invalid JSON data source conversion. +- `1.4.0` - Sept 8, 2018: + - _Breaking change_: the library is no longer exported in UMD format. Now it's 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 your 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. +- `1.2.3` - Nov 7, 2017. Country data updates. React moved to peer dependency, thanks [@iamdey](https://github.com/iamdey)! +- `1.2.2` - Oct 4, 2017 - Update to pass event on change. Thanks [@robertnealan](https://github.com/robertnealan)! +- `1.2.1` - Sept 6, 2017 - IE11 bug fix. +- `1.2.0` - Aug 7, 2017 - updated country-region-data; dependency updates. +- `1.1.0` - May 18, 2017 - dependency updates. `disabled` option added to `` and ``. +- `1.0.4` - April 12, 2017 - bug fix. Thanks @bebbi and @tchaffee! +- `1.0.3` - Jan 2, 2016 - updated country-region-data, repo link fix. +- `1.0.2` - October 16, 2016 - Fix issue where source-data.js in lib had no country data. +- `1.0.0` - July 1, 2016 - initial version. diff --git a/DEVELOPER.md b/DEVELOPER.md new file mode 100644 index 0000000..40bb7e5 --- /dev/null +++ b/DEVELOPER.md @@ -0,0 +1,22 @@ +## Developer Notes + +This was a very old script which I revamped in Dec 2024 to bring it into the 21st century. Version `4.0.0` now uses Turborepo, Typescript, +modern rollup + babel, jest, modern React, Docusaurus for the doc. + +`npm run dev` - starts dev mode +`npm run test` - runs the tests + +### Local Dev + +- `pnpm install` - bootstraps the monorepo +- `npm run dev` - starts up a dev server loading the documentation + demos section. This gives you a working environment where you can test and rebuild the script without doing anything extra. + +### Tests + +The Jest/RTL unit tests are found in the `packages/react-country-region-selector/src/__tests__` folder. But to run, +just run `npm run test` in the root. + +### Publishing + +Package: Run `npm run publish` from the root. Requires 2FA. +Github pages: Run `npm run update-gh-pages` from the root. diff --git a/LICENSE b/LICENSE deleted file mode 100755 index 3ccebe3..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2016 Benjamin Keen - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md old mode 100755 new mode 100644 index 9156345..20d04ef --- a/README.md +++ b/README.md @@ -1,266 +1,35 @@ -# 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). - -It's pretty versatile: -- Has two separate components (``, ``) 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. - - -### Examples - -Check out the [github pages](http://benkeen.github.io/react-country-region-selector/) section for some examples + example +# react-country-region-selector + +### About + +This library provides a pair of React components to display _connected_ country and region dropdowns (pick a country, it shows the relevant regions). If you're not using React, check out the [plain vanilla JS version](https://github.com/country-regions/country-region-selector) instead. 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. + +> [!NOTE] +> +> `4.0.0` has been released! This is a major rewrite of the whole script. +> +> - Breaking changes: +> - Minimum react version updated to 16.8.0 (hooks) +> - `classes` prop has been renamed `className` +> - `onBlur` callback is no longer passed the selected value as first argument, just the event +> - Improvements: +> - completely rewritten in modern React and typescript, plus a new dev environment for working locally +> - [greatly improved documentation](https://country-regions.github.io/react-country-region-selector/) +> - now supports integrations with third party component library (Material UI, Fluent UI etc.) +> - bundle size now 72KB (previously 88KB) +> +> Please report any issues [here on github](https://github.com/country-regions/react-country-region-selector). + +### Demos & Doc + +Check out the [github pages](http://country-regions.github.io/react-country-region-selector/) section for the full documentation + example JSX code. +### Developer links -### 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 - -Ah, modern web development: so many choices! Here's how to install it with the most common build tools: - -#### npm - -```javascript -npm install react-country-region-selector --save -``` - -#### Bower - -```javascript -bower install react-country-region-selector -``` - -#### UMD (Universal Module Definition) - -Just use the `dist/rcrs.min.js` file. - - - -### Usage - -Here are a few examples in a few different formats. - -- [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'; - - -class Example extends React.Component { - constructor (props) { - super(props); - this.state = { country: '', region: '' }; - } - - selectCountry (val) { - this.setState({ country: val }); - } - - selectRegion (val) { - this.setState({ region: val }); - } - - render () { - const { country, region } = this.state; - return ( -
- this.selectCountry(val)} /> - this.selectRegion(val)} /> -
- ); - } -} -``` - -#### 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 ( -
- - -
- ); - } -} -``` - - -#### 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 ( -
- - -
- ); - } - } - - return Example; -}); -``` - - -### Options - -`````` - -| Parameter | Required? | Default | Type | Description | -|:---|:---:|:---|:---|:---| -| 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 `