country-state-city-custom

country-state-city-custom is a React component package that allows users to select a country, state, and city dynamically using the Universal Tutorial API. This package uses Material-UI (MUI) for styling, supports custom sizes, and provides options to set default values for the selectors.

Features

• Dynamic Country, State, and City Selection: Automatically fetches states and cities based on the selected country and state.
• Customizable Sizes: Adjust the size of the dropdowns with options for small or medium.
• Default Values: Set default values for the country, state, and city selectors.
• Country Code Display: Displays the selected country's phone code as a left adornment in the country selection field.

Installation

To install the package, use npm or yarn:

npm install country-state-city-custom
export const LocationSelector = ({ size }: { size: 'small' | 'medium' }) => {
  const [selectedCountry, setSelectedCountry] = useState('')
  const [selectedState, setSelectedState] = useState('')
  const [selectedCity, setSelectedCity] = useState('')

  return (
    <div>
      <h1>Select Location</h1>

      {/* Country Selector */}
      <CountrySelector size={size} defaultCountry="India" onSelectCountry={(country, code) => setSelectedCountry(country)} />

      {/* State Selector */}
      {selectedCountry && <StateSelector size={size} defaultState="Delhi" selectedCountry={selectedCountry} onSelectState={setSelectedState} />}

      {/* City Selector */}
      {selectedState && <CitySelector size={size} defaultCity="New Delhi" selectedState={selectedState} />}
    </div>
  )
}