Gathering detailed insights and metrics for volkeno-react-country-state-city
Installations
npm install volkeno-react-country-state-cityDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Min. Node Version
>=10
Node Version
17.6.0
NPM Version
8.5.1
Score
64.7
Supply Chain
90.1
Quality
73.4
Maintenance
50
Vulnerability
99.6
License
Releases
Unable to fetch releases
Contributors
2
Unable to fetch Contributors
Languages
3
TypeScript
HTML
CSS
TypeScript (82.34%)
HTML (12.05%)
CSS (5.61%)
Developer
VolkenoMakers
Download Statistics
Total Downloads
5,432
Last Day
27
Last Week
73
Last Month
269
Last Year
2,165
GitHub Statistics
12 Commits
3 Forks
3 Watching
2 Branches
2 Contributors
Bundle Size
124.59 kB
Minified
25.90 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.0
Package Id
volkeno-react-country-state-city@1.0.0
Unpacked Size
311.32 kB
Size
44.50 kB
File Count
9
NPM Version
8.5.1
Node Version
17.6.0
Total Downloads
Cumulative downloads
Total Downloads
5,432
Last day
237.5%
27
Compared to previous day
Last week
62.2%
73
Compared to previous week
Last month
78.1%
269
Compared to previous month
Last year
22.4%
2,165
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
2
Dev Dependencies
30
@testing-library/jest-dom@testing-library/react@testing-library/user-event@types/jest@types/node@types/react@types/react-dom@types/react-select@typescript-eslint/eslint-plugin@typescript-eslint/parserbabel-eslintcross-enveslinteslint-config-prettiereslint-config-standardeslint-config-standard-reacteslint-plugin-importeslint-plugin-nodeeslint-plugin-prettiereslint-plugin-promiseeslint-plugin-reacteslint-plugin-standardgh-pagesmicrobundle-crlnpm-run-allprettierreactreact-domreact-scriptstypescript
Versions
volkeno-react-country-state-city
This library provides React components to display dropdowns of connected countries, states and cities (choose a country, it displays the affected states, choose a state, it has displays the affected cities).
Install
1npm install --save volkeno-react-country-state-city
Usage
1import React, { useState } from 'react' 2import { 3 CountrySelector, 4 StateSelector, 5 CitySelector 6} from 'volkeno-react-country-state-city' 7import 'volkeno-react-country-state-city/dist/index.css' 8 9const App = () => { 10 const [country, setCountry] = useState<any>('') 11 const [state, setState] = useState<any>('') 12 const [city, setCity] = useState<any>('') 13 14 const handleCountrySelect = (option: any) => { 15 setCountry(option) 16 } 17 18 const handleStateSelect = (option: any) => { 19 setState(option) 20 } 21 22 const handleCitySelect = (option: any) => { 23 setCity(option) 24 } 25 return ( 26 <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', border: '2px solid grey', margin: '5rem'}}> 27 <CountrySelector 28 onChange={handleCountrySelect} 29 name='country' 30 placeholder='Select a country' 31 value={country} 32 /> 33 <StateSelector 34 country={country} 35 name='state' 36 value={state} 37 countryPlaceholder='Select a country first' 38 onChange={handleStateSelect} 39 /> 40 <CitySelector 41 state={state} 42 name='city' 43 value={city} 44 statePlaceholder='Select a state first' 45 onChange={handleCitySelect} 46 /> 47 </div> 48 ) 49} 50 51export default App
Configuration - Props
<CountrySelector/>
| Property | Type | Require | Default | Description |
|---|---|---|---|---|
| name | string | false | country | name of input |
| containerClass | string | false | ... | ClassName of select container |
| onChange | function | true | ... | Callback that gets called when the user selects a country. Use this to store the value in whatever store you're using. |
| optionClass | string | false | ... | ClassName of label container |
| styleContainer | React.CSSProperties | false | ... | Apply a style to the select container |
| value | number | true | ... | The currently selected country. |
| placeholder | string | false | "Select Country" | The default option label. |
<StateSelector/>
| Property | Type | Require | Default | Description |
|---|---|---|---|---|
| country | object | true | ... | The currently selected country. |
| name | string | false | state | name of input |
| containerClass | string | false | ... | ClassName of select container |
| onChange | function | true | ... | Callback that gets called when the user selects a state. Use this to store the value in whatever store you're using. |
| optionClass | string | false | ... | ClassName of label container |
| styleContainer | React.CSSProperties | false | ... | Apply a style to the select container |
| value | number | true | ... | The currently selected country. |
| placeholder | string | false | "Select State" | The default option label. |
| countryPlaceholder | string | false | "Select Country" | The label that appears in the state dropdown when the user hasn't selected a country yet. |
<CitySelector/>
| Property | Type | Require | Default | Description |
|---|---|---|---|---|
| state | object | true | ... | The currently selected state. |
| name | string | false | city | name of input |
| containerClass | string | false | ... | ClassName of select container |
| onChange | function | true | ... | Callback that gets called when the user selects a state. Use this to store the value in whatever store you're using. |
| optionClass | string | false | ... | ClassName of label container |
| styleContainer | React.CSSProperties | false | ... | Apply a style to the select container |
| value | number | true | ... | The currently selected state. |
| placeholder | string | false | "Select State" | The default option label. |
| statePlaceholder | string | false | "Select State" | The label that appears in the city dropdown when the user hasn't selected a state yet. |
License
MIT © VolkenoMakers
No vulnerabilities found.
No security vulnerabilities found.