-
Notifications
You must be signed in to change notification settings - Fork 131
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
more doc; working on MUI integration
- Loading branch information
Showing
36 changed files
with
839 additions
and
98 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| --- | ||
| title: Country Blacklist | ||
| sidebar_position: 9 | ||
| --- | ||
|
|
||
| import CountryBlacklist from '@site/src/components/demos/features/CountryBlacklist'; | ||
|
|
||
| The `blacklist` prop omits those countries from the dropdown. This demo hides all countries starting with `A`. | ||
| The values are found in the `countryShortCode` value in the [source data package](https://github.com/country-regions/country-region-data/blob/master/data.json). | ||
|
|
||
| <CountryBlacklist /> | ||
|
|
||
| --- | ||
|
|
||
| ```tsx | ||
| import React, { useState } from 'react'; | ||
| import { CountryDropdown, RegionDropdown } from 'react-country-region-selector'; | ||
|
|
||
| const CountryBlacklist = () => { | ||
| const [country, setCountry] = useState(''); | ||
| const [region, setRegion] = useState(''); | ||
|
|
||
| return ( | ||
| <> | ||
| <CountryDropdown | ||
| value={country} | ||
| onChange={(val) => setCountry(val)} | ||
| // highlight-start | ||
| blacklist={[ | ||
| 'AF', | ||
| 'AX', | ||
| 'AL', | ||
| 'DZ', | ||
| 'AS', | ||
| 'AD', | ||
| 'AO', | ||
| 'AI', | ||
| 'AQ', | ||
| 'AG', | ||
| 'AR', | ||
| 'AM', | ||
| 'AW', | ||
| 'AU', | ||
| 'AT', | ||
| 'AZ', | ||
| ]} | ||
| // highlight-end | ||
| /> | ||
| <RegionDropdown | ||
| country={country} | ||
| value={region} | ||
| onChange={(val) => setRegion(val)} | ||
| /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default CountryBlacklist; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| --- | ||
| title: Disable Fields | ||
| sidebar_position: 12 | ||
| --- | ||
|
|
||
| import DisableFields from '@site/src/components/demos/features/DisableFields'; | ||
|
|
||
| The `disabled` prop can be used on either component. | ||
|
|
||
| <DisableFields /> | ||
|
|
||
| --- | ||
|
|
||
| ```tsx | ||
| import React, { useState } from 'react'; | ||
| import { CountryDropdown, RegionDropdown } from 'react-country-region-selector'; | ||
|
|
||
| const DisableFields = () => { | ||
| const [country, setCountry] = useState(''); | ||
| const [region, setRegion] = useState(''); | ||
|
|
||
| return ( | ||
| <> | ||
| <CountryDropdown | ||
| value={country} | ||
| onChange={(val) => setCountry(val)} | ||
| // highlight-next-line | ||
| disabled={true} | ||
| /> | ||
| <RegionDropdown | ||
| country={country} | ||
| value={region} | ||
| onChange={(val) => setRegion(val)} | ||
| // highlight-next-line | ||
| disabled={true} | ||
| /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default DisableFields; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| --- | ||
| title: Region Blacklist | ||
| sidebar_position: 11 | ||
| --- | ||
|
|
||
| import RegionBlacklist from '@site/src/components/demos/features/RegionBlacklist'; | ||
|
|
||
| The `blacklist` prop on the RegionDropdown copmonent lets you hide specific regions from the list. This hides | ||
| Alberta and BC from Canada's regions and Washington and Texas from US. The | ||
| values are found in the `countryShortCode` value in the [source data package](https://github.com/country-regions/country-region-data/blob/master/data.json). | ||
|
|
||
| <RegionBlacklist /> | ||
|
|
||
| --- | ||
|
|
||
| ```tsx | ||
| import React, { useState } from 'react'; | ||
| import { CountryDropdown, RegionDropdown } from 'react-country-region-selector'; | ||
|
|
||
| const RegionBlacklist = () => { | ||
| const [country, setCountry] = useState(''); | ||
| const [region, setRegion] = useState(''); | ||
|
|
||
| return ( | ||
| <> | ||
| <CountryDropdown | ||
| value={country} | ||
| onChange={(val) => setCountry(val)} | ||
| whitelist={['CA', 'US']} | ||
| /> | ||
| <RegionDropdown | ||
| country={country} | ||
| value={region} | ||
| onChange={(val) => setRegion(val)} | ||
| // highlight-start | ||
| blacklist={{ | ||
| CA: ['AB', 'BC'], | ||
| US: ['WA', 'TX'], | ||
| }} | ||
| // highlight-end | ||
| /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default RegionBlacklist; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| --- | ||
| title: Region Whitelist | ||
| sidebar_position: 10 | ||
| --- | ||
|
|
||
| import RegionWhitelist from '@site/src/components/demos/features/RegionWhitelist'; | ||
|
|
||
| The `whitelist` prop on the `RegionDropdown` component limits the listed regions to those that you specify. The | ||
| values are found in the `countryShortCode` value in the [source data package](https://github.com/country-regions/country-region-data/blob/master/data.json). | ||
| Note the order will always be alphabetical. | ||
|
|
||
| <RegionWhitelist /> | ||
|
|
||
| --- | ||
|
|
||
| ```tsx | ||
| import React, { useState } from 'react'; | ||
| import { CountryDropdown, RegionDropdown } from 'react-country-region-selector'; | ||
|
|
||
| const RegionWhitelist = () => { | ||
| const [country, setCountry] = useState(''); | ||
| const [region, setRegion] = useState(''); | ||
|
|
||
| return ( | ||
| <> | ||
| <CountryDropdown | ||
| value={country} | ||
| onChange={(val) => setCountry(val)} | ||
| whitelist={['CA', 'US']} | ||
| /> | ||
| <RegionDropdown | ||
| country={country} | ||
| value={region} | ||
| onChange={(val) => setRegion(val)} | ||
| // highlight-start | ||
| whitelist={{ | ||
| CA: ['AB', 'BC'], | ||
| US: ['WA', 'TX'], | ||
| }} | ||
| // highlight-end | ||
| /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default RegionWhitelist; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| --- | ||
| title: Features | ||
| --- | ||
|
|
||
| This section demos all the various features of the script. You can read the descriptions in the sidebar in the left if | ||
| that works for you, but here's a simple mapping of prop to demo - in case that's more useful. | ||
|
|
||
| | `CountryDropdown` | `RegionDropdown` | | ||
| | --------------------------- | --------------------------- | | ||
| | [`value`](../BasicUsage) | [`value`](../BasicUsage) | | ||
| | [`onChange`](../BasicUsage) | [`onChange`](../BasicUsage) | | ||
|
|
||
| [TODO] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| --- | ||
| title: Demos | ||
| --- | ||
|
|
||
| The following pages demo all the features of the script. | ||
|
|
||
| - [Basic Usage](./BasicUsage): start here for a quick demonstration of how to use the components. | ||
| - [Features](./Features): this section contains demos of all the available features. | ||
| - [Integrations](./Integrations): by default, the components output by this package output plain HTML `<select>` and | ||
| `<option>` elements. This section shows how you can use the package with other libraries like Material UI, using their | ||
| own components instead. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| title: Material UI | ||
| sidebar_position: 1 | ||
| --- | ||
|
|
||
| import MaterialUI from '@site/src/components/demos/integrations/MaterialUI'; | ||
|
|
||
| <MaterialUI /> | ||
|
|
||
| --- | ||
|
|
||
| ```tsx | ||
|
|
||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.