npmpackage.info

Gathering detailed insights and metrics for country-dropdown

Other packages similar to country-dropdown

vue-country-dropdown-2

1.0.13

Country Dropdown for Vue@2

country-flags-dropdown

0.1.4

This component lists the country flags with phone codes with search filtering ability and dropdown selection with keyboard.

vue-country-dropdown

2.0.8

Country Dropdown with Vue

react-native-element-dropdown

2.12.4

React Native Element Dropdown is a library that provides a customizable dropdown component for React Native applications.

country-dropdown

0.1.4

51.79 kB

218

Installations

npm install country-dropdown

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

20.5.0

NPM Version

9.8.0 Score

56.7

Supply Chain

90.5

Quality

73.6

Maintenance

100

Vulnerability

99.3

License

Releases

Unable to fetch releases

Contributors

Download Statistics

Total Downloads

218

Last Day

Last Week

Last Month

Last Year

203

Maintainers

Package Meta Information

Latest Version

0.1.4

Package Id

country-dropdown@0.1.4

Unpacked Size

51.79 kB

Size

8.94 kB

File Count

NPM Version

9.8.0

Node Version

20.5.0

Publised On

18 Jun 2024

Total Downloads

Cumulative downloads

Total Downloads

218

Last day

-50%

Compared to previous day

Last week

Compared to previous week

Last month

325%

Compared to previous month

Last year

1,253.3%

203

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

autoprefixer postcss react react-dom tailwindcss react-hook-form

Dev Dependencies

@babel/preset-react @types/jest @types/node @types/react @types/react-dom autoprefixer copyfiles postcss react react-dom react-script tailwindcss ts-loader tsc-hooks typescript web-vitals react-hook-form

Versions

Country Dropdown

A customizable React component for country, state, and city dropdowns.

Installation

Step 1: Install the package from npm.

To get started with the Country Dropdown component, follow these steps:

npm i country-dropdown

Step 2: Request an API key from Country State City API.

Before using the component, you need to get an API key from the Country State City API website.

Step 3: Set the API key in the environment(.env) file.

Please make sure to replace the your_api_key in the .env file with your actual API key.

REACT_APP_COUNTRY_STATE_CITY_API_KEY = your_api_key

Step 4: Wrap your component using ValueProvider.

Wrap your components using the ValueProvider component to ensure proper functionality.

import { ValueProvider } from "country-dropdown";

<ValueProvider>
    <YourComponents>
</ValueProvider>

Step 5: Import the Dropdown component and use it.

Import the Dropdown component and integrate it into your application, providing a suitable onChange function.

import { Dropdown, ValueProvider } from "country-dropdown";

<ValueProvider>
    <Dropdown
        onChange={(value, type) => handleChange(value, type)}
    />
</ValueProvider>

Prop Name	Type	Description
onChange	`(value: object, type: string) => void`	A callback function triggered when the value of the dropdown changes. Receives the selected value and the type of dropdown (e.g., "Country", "State", "City").
dropdownOptions (optional)	`Array<string>`	An array of strings representing the dropdown options. Determines the number of dropdowns to display. Example: `["Country", "State", "City"]`.
cityPlaceholder (optional)	`string`	The placeholder text to display in the city dropdown.
statePlaceholder (optional)	`string`	The placeholder text to display in the state dropdown.
countryPlaceholder (optional)	`string`	The placeholder text to display in the country dropdown.
containerClassName (optional)	`string`	A CSS class name or Tailwind classes to customize the styling of the container that wraps the dropdown component.
inputClassName (optional)	`string`	A CSS class name or Tailwind classes to customize the styling of the dropdown input field.
optionItemClassName (optional)	`string`	A CSS class name or Tailwind classes to customize the styling of the dropdown options.
optionItemSelectedClassName (optional)	`string`	A CSS class name or Tailwind classes to customize the styling of the selected dropdown options.
optionsListClassName (optional)	`string`	A CSS class name or Tailwind classes to customize the styling of the dropdown options list.
optionItemHoverClassName (optional)	`string`	A CSS class name or Tailwind classes to customize the styling of the dropdown options when hovered. Use `hover:` for Tailwind classes and `:hover` for regular CSS classes.
defaultCountryValue (optional)	`string`	The ISO2 code for the default country to be selected if `Country` is not present in the dropdown options.
defaultStateValue (optional)	`string`	The ISO2 code for the default state to be selected if `Country` and `State` are not present in the dropdown options.
labelClasses (optional)	`string`	A CSS class name or Tailwind classes to customize the styling of the input label.
cityLabel (optional)	`string`	A label for the city dropdown.
countryLabel (optional)	`string`	A label for the country dropdown.
stateLabel (optional)	`string`	A label for the state dropdown.
cityDropdownName (optional)	`string`	A name for the city dropdown.
stateDropdownName (optional)	`string`	A name for the state dropdown.
countryDropdownName (optional)	`string`	A name for the country dropdown.

Click here to visit Countries States Cities Demo for reference

Reference for ISO2 code

Use Dropdown with react-hook-form Library

import { DropdownWithReactHookForm } from "country-dropdown";

<DropdownWithReactHookForm
    onDropdownChange={(value, type) =>
        handleChange(value, type)
    }
    dropdownOptions={["City", "State", "Country"]}
/>

Prop Name	Type	Description
onDropdownChange	`(value: object, type: string) => void`	A callback function triggered when the value of the dropdown changes. Receives the selected value and the type of dropdown (e.g., "Country", "State", "City").
dropdownOptions (optional)	`Array<string>`	An array of strings representing the dropdown options. Determines the number of dropdowns to display. Example: `["Country", "State", "City"]`.
cityPlaceholder (optional)	`string`	The placeholder text to display in the city dropdown.
statePlaceholder (optional)	`string`	The placeholder text to display in the state dropdown.
countryPlaceholder (optional)	`string`	The placeholder text to display in the country dropdown.
containerClassName (optional)	`string`	A CSS class name or Tailwind classes to customize the styling of the container that wraps the dropdown component.
inputClassName (optional)	`string`	A CSS class name or Tailwind classes to customize the styling of the dropdown input field.
optionItemClassName (optional)	`string`	A CSS class name or Tailwind classes to customize the styling of the dropdown options.
optionItemSelectedClassName (optional)	`string`	A CSS class name or Tailwind classes to customize the styling of the selected dropdown options.
optionsListClassName (optional)	`string`	A CSS class name or Tailwind classes to customize the styling of the dropdown options list.
optionItemHoverClassName (optional)	`string`	A CSS class name or Tailwind classes to customize the styling of the dropdown options when hovered. Use `hover:` for Tailwind classes and `:hover` for regular CSS classes.
defaultCountryValue (optional)	`string`	The ISO2 code for the default country to be selected if `Country` is not present in the dropdown options.
defaultStateValue (optional)	`string`	The ISO2 code for the default state to be selected if `Country` and `State` are not present in the dropdown options.
labelClasses (optional)	`string`	A CSS class name or Tailwind classes to customize the styling of the input label.
cityLabel (optional)	`string`	A label for the city dropdown.
countryLabel (optional)	`string`	A label for the country dropdown.
stateLabel (optional)	`string`	A label for the state dropdown.
cityDropdownName (optional)	`string`	A name for the city dropdown.
stateDropdownName (optional)	`string`	A name for the state dropdown.
countryDropdownName (optional)	`string`	A name for the country dropdown.
errorClassNames (optional)	`string`	CSS class name or Tailwind classes to customize the styling of the error message.
cityValidations (optional)	`RegisterOptions`	Validations for city dropdown
stateValidations (optional)	`RegisterOptions`	Validations for state dropdown
countryValidations (optional)	`RegisterOptions`	Validations for country dropdown

No vulnerabilities found.

No security vulnerabilities found.