From 0a6188a03cdb2d342615a91815f5475c6f9b6807 Mon Sep 17 00:00:00 2001 From: Ben Keen Date: Mon, 2 Dec 2024 20:34:52 -0800 Subject: [PATCH] react-select demo --- apps/docs/README.md | 42 +-------- .../docs/Demos/integrations/MaterialUI.mdx | 4 +- .../docs/Demos/integrations/ReactSelect.mdx | 94 +++++++++++++++++++ apps/docs/package.json | 3 +- .../demos/integrations/ReactSelect.tsx | 70 ++++++++++++++ .../src/helpers.tsx | 2 +- pnpm-lock.yaml | 40 ++++++++ 7 files changed, 211 insertions(+), 44 deletions(-) create mode 100644 apps/docs/docs/Demos/integrations/ReactSelect.mdx create mode 100644 apps/docs/src/components/demos/integrations/ReactSelect.tsx diff --git a/apps/docs/README.md b/apps/docs/README.md index 0c6c2c2..c773359 100644 --- a/apps/docs/README.md +++ b/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= 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`. diff --git a/apps/docs/docs/Demos/integrations/MaterialUI.mdx b/apps/docs/docs/Demos/integrations/MaterialUI.mdx index 2191201..a2c7cf7 100644 --- a/apps/docs/docs/Demos/integrations/MaterialUI.mdx +++ b/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. diff --git a/apps/docs/docs/Demos/integrations/ReactSelect.mdx b/apps/docs/docs/Demos/integrations/ReactSelect.mdx new file mode 100644 index 0000000..eb1dd98 --- /dev/null +++ b/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. + + + +--- + +```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 ( + { + onChange({ target: { value: data } }, null); + }} + /> + ); +}; + +const ReactSelect = () => { + const [country, setCountry] = useState(); + const [region, setRegion] = useState(); + + return ( + <> +
+ { + setCountry(val ? val : undefined); + setRegion(null); + }} + customRender={customRender} + /> +
+
+ { + console.log('... ', val); + setRegion(val); + }} + customRender={customRender} + /> +
+ + ); +}; + +export default ReactSelect; diff --git a/packages/react-country-region-selector/src/helpers.tsx b/packages/react-country-region-selector/src/helpers.tsx index d05917c..6702c62 100644 --- a/packages/react-country-region-selector/src/helpers.tsx +++ b/packages/react-country-region-selector/src/helpers.tsx @@ -95,7 +95,7 @@ export const defaultRender = (data: RenderData) => { return (