main README update; drop the alpha

README.md

@@ -1,57 +1,34 @@
 # react-country-region-selector
 
-> Warning! I'm actively working on 4.0.0 so the master branch will be a little broken until it's ready. Stay tuned.
+> [!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)
 
 ### 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.
 
+### Demos and Documentation
+
 Check out the [github pages](http://country-regions.github.io/react-country-region-selector/) section for some examples + example
 JSX code.
 
-<a name="features"></a>
-
-### Usage
-
-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 in a store somewhere. Here's a simple example that uses state:
-
-```javascript
-import React, { useState } from 'react';
-
-// 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';
-
-const Example = () => {
-  const [country, setCountry] = useState('');
-  const [region, setRegion] = useState('');
-
-  return (
-    <div>
-      <CountryDropdown value={country} onChange={(val) => setCountry(val)} />
-      <RegionDropdown
-        country={country}
-        value={region}
-        onChange={(val) => setRegion(val)}
-      />
-    </div>
-  );
-};
-```
-
-<a name="changelog"></a>
-
-### Changelog
+### Developer links
 
-- [See CHANGELOG.md](./CHANGELOG.md)
+- [CHANGELOG.md](./CHANGELOG.md)
+- [DEVELOPER.md](./DEVELOPER.md)
 
 <a name="license"></a>
 
 ### License
 
-MIT.
+MIT

packages/react-country-region-selector/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-country-region-selector",
-  "version": "4.0.0-alpha",
+  "version": "4.0.0",
   "description": "Country/region React components for your forms.",
   "author": "country-regions",
   "license": "MIT",

scripts/gh-pages.js

@@ -1,3 +1,5 @@
+// to use, run `npm run build` from the root, then run `node scripts/gh-pages.js`. This deploys the docusaurus
+// build to github pages here: https://country-regions.github.io/react-country-region-selector/
 var ghpages = require('gh-pages');
 
 ghpages.publish('apps/docs/build', function (err) {