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

npm install --save volkeno-react-country-state-city

Usage

import React, { useState } from 'react'
import {
  CountrySelector,
  StateSelector,
  CitySelector
} from 'volkeno-react-country-state-city'
import 'volkeno-react-country-state-city/dist/index.css'

const App = () => {
  const [country, setCountry] = useState<any>('')
  const [state, setState] = useState<any>('')
  const [city, setCity] = useState<any>('')

  const handleCountrySelect = (option: any) => {
    setCountry(option)
  }

  const handleStateSelect = (option: any) => {
    setState(option)
  }

  const handleCitySelect = (option: any) => {
    setCity(option)
  }
  return (
    <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', border: '2px solid grey', margin: '5rem'}}>
      <CountrySelector
        onChange={handleCountrySelect}
        name='country'
        placeholder='Select a country'
        value={country}
      />
      <StateSelector
        country={country}
        name='state'
        value={state}
        countryPlaceholder='Select a country first'
        onChange={handleStateSelect}
      />
      <CitySelector
        state={state}
        name='city'
        value={city}
        statePlaceholder='Select a state first'
        onChange={handleCitySelect}
      />
    </div>
  )
}

export 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