react-select demo

apps/docs/README.md

@@ -1,41 +1,3 @@
-# Website
+# Docs
 
-This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
-
-### Installation
-
-```
-$ yarn
-```
-
-### Local Development
-
-```
-$ yarn start
-```
-
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-### Build
-
-```
-$ yarn build
-```
-
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
-
-### Deployment
-
-Using SSH:
-
-```
-$ USE_SSH=true yarn deploy
-```
-
-Not using SSH:
-
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
-```
-
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
+This package contains the documentation and demos for `react-country-region-selector`.

apps/docs/docs/Demos/integrations/MaterialUI.mdx

@@ -5,8 +5,8 @@ sidebar_position: 1
 
 import MaterialUI from '@site/src/components/demos/integrations/MaterialUI';
 
-This demo illustrates how you can integrate this script with Material UI. Note the `customRender` method and how
-its handling the actual rendering of the dropdowns.
+This shows an integration with [Material UI](https://mui.com/material-ui/getting-started/). Note the
+`customRender` method and how its handling the actual rendering of the dropdowns.
 
 <MaterialUI />
 

apps/docs/docs/Demos/integrations/ReactSelect.mdx

@@ -0,0 +1,94 @@
+---
+title: React Select
+---
+
+import ReactSelect from '@site/src/components/demos/integrations/ReactSelect';
+
+[React-select](https://react-select.com/) is a popular standalone component for dropdowns. This shows an
+example integration.
+
+_Warning: opinions!_ I've used react-select on many projects and it's a beautiful library. Once it's integrated into
+your app it looks and works beautifully. But the API of passing a complex object as the `value` is very poor design.
+Even simple things like accommodating localization becomes very complicated since the value prop changes based on
+language and you need to change the value prop each time.
+
+This integration highlights that difficult API decision on their parts. We have to store in state all the info
+react-select needs - then it'll be up to you to store that info.
+
+The code here could be improved; typings too. But hopefully it gets you on the right path.
+
+<ReactSelect />
+
+---
+
+```tsx
+import React, { useState } from 'react';
+import Select from 'react-select';
+import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';
+
+const customRender = (props) => {
+  const {
+    options,
+    value,
+    disabled,
+    onChange,
+    reactSelectValue,
+    onBlur,
+    ...selectProps
+  } = props;
+
+  return (
+    <Select
+      {...selectProps}
+      options={options}
+      isDisabled={disabled}
+      isSearchable={true}
+      isClearable={true}
+      value={reactSelectValue}
+      onChange={(data: any) => {
+        onChange({ target: { value: data } }, null);
+      }}
+    />
+  );
+};
+
+const ReactSelect = () => {
+  const [country, setCountry] = useState();
+  const [region, setRegion] = useState();
+
+  return (
+    <>
+      <div style={{ width: 200, display: 'inline-block', marginRight: 8 }}>
+        <CountryDropdown
+          value={country?.value || ''}
+          reactSelectValue={country}
+          className="country"
+          name="country-field"
+          classNamePrefix="country-"
+          onChange={(val) => {
+            setCountry(val ? val : undefined);
+            setRegion(null);
+          }}
+          customRender={customRender}
+        />
+      </div>
+      <div style={{ width: 200, display: 'inline-block' }}>
+        <RegionDropdown
+          country={country?.value || ''}
+          value={region?.value || null}
+          reactSelectValue={region}
+          className="region"
+          name="region-field"
+          classNamePrefix="region-"
+          onChange={(val) => {
+            setRegion(val);
+          }}
+          customRender={customRender}
+        />
+      </div>
+    </>
+  );
+};
+
+export default ReactSelect;
+```

apps/docs/package.json

@@ -26,7 +26,8 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-country-region-selector": "workspace:*",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-select": "^5.8.3"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.6.3",

apps/docs/src/components/demos/integrations/ReactSelect.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import Select from 'react-select';
+import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';
+
+const customRender = (props) => {
+  const {
+    options,
+    value,
+    disabled,
+    onChange,
+    reactSelectValue,
+    onBlur,
+    ...selectProps
+  } = props;
+
+  return (
+    <Select
+      {...selectProps}
+      options={options}
+      isDisabled={disabled}
+      isSearchable={true}
+      isClearable={true}
+      value={reactSelectValue}
+      onChange={(data: any) => {
+        onChange({ target: { value: data } }, null);
+      }}
+    />
+  );
+};
+
+const ReactSelect = () => {
+  const [country, setCountry] = useState();
+  const [region, setRegion] = useState();
+
+  return (
+    <>
+      <div style={{ width: 200, display: 'inline-block', marginRight: 8 }}>
+        <CountryDropdown
+          value={country?.value || ''}
+          reactSelectValue={country}
+          className="country"
+          name="country-field"
+          classNamePrefix="country-"
+          onChange={(val) => {
+            setCountry(val ? val : undefined);
+            setRegion(null);
+          }}
+          customRender={customRender}
+        />
+      </div>
+      <div style={{ width: 200, display: 'inline-block' }}>
+        <RegionDropdown
+          country={country?.value || ''}
+          value={region?.value || null}
+          reactSelectValue={region}
+          className="region"
+          name="region-field"
+          classNamePrefix="region-"
+          onChange={(val) => {
+            console.log('... ', val);
+            setRegion(val);
+          }}
+          customRender={customRender}
+        />
+      </div>
+    </>
+  );
+};
+
+export default ReactSelect;

packages/react-country-region-selector/src/helpers.tsx

@@ -95,7 +95,7 @@ export const defaultRender = (data: RenderData) => {
   return (
     <select {...rest}>
       {options
-        .filter((row) => !row)
+        .filter((row) => row)
         .map(({ label, value, key }) => (
           <option value={value} key={key}>
             {label}