RHFCountrySelect

RHFCountrySelect leverages the Autocomplete component from Material-UI to enable users to select one or more countries from a comprehensive list of 250 options. It offers flexibility in retrieving the selected country's value as its name, ISO code, or ISO3 code. Additionally, each option is displayed with the respective country's flag, enhancing the component's visual appeal and user experience.

Usage

import RHFCountrySelect, {
  RHFCountrySelectProps,
  CountryISO,
  CountryDetails,
  countryList
} from '@nish1896/rhf-mui-components/mui/country-select';

<RHFCountrySelect
  fieldName="nationality"
  control={control}
  errorMessage={errors?.nationality?.message}
/>

Each option in the list of 250 countries is represented as an object structured as follows:

{
  name: 'India',
  iso: 'IN',
  iso3: 'IND',
  emoji: '🇮🇳'
}

By default, the iso key is used to return the value of the selected option(s), offering a compact and consistent identifier. The iso key is strongly typed as CountryISO, ensuring type safety and consistency in integration. Additionally, users can choose to retrieve the name or iso3 value(s) of the selected option(s) by specifying the desired key through the valueKey prop, providing flexibility to suit various use cases.

For developers seeking access to all available country data, the complete list of countries is provided via the countryList export from this module.

The following code snippet demonstrates an advanced use case where users can select multiple countries by their names from a predefined list of country options. To improve usability, a set of preferred countries is prominently displayed at the top of the dropdown. This prioritization ensures frequently chosen options are easily accessible, streamlining the selection process.

/* Logic for filtering countries */
const filteredCountries = countryList.filter(
  country => ['IN', 'US', 'AU', 'FI', 'UA', 'CN', 'GB', 'JP', 'VN'].includes(country.iso)
);

<RHFCountrySelect
  fieldName="dreamDestinations"
  control={control}
  valueKey="name"
  preferredCountries={['IN', 'AU', 'JP']}
  countries={filteredCountries}
  multiple
  errorMessage={errors?.dreamDestinations?.message}
/>

Examples

• RHFCountrySelect
• Autocomplete - Country Select
• Complete Form

API

The RHFCountrySelectProps interface extends AutocompleteProps and accepts the following additional props:

Name	Type	Required	Description
fieldName	string	✅	React Hook Form requires name as a key for the registration process. This is a required prop for all components.
control	UseFormControl	✅	The control option yielded on calling the useForm hook.
registerOptions	RegisterOptions		Register options for validation if using react-hook-form without any validation libraries like yup or Joi.
countries	CountryDetails[]		The list of countries to render for selection in the Autocomplete. By default all countries will be listed.
preferredCountries	CountryISO[]		The countries to show at the top of the list. The array requires the iso values of the countries.
valueKey	name` OR `iso` OR `iso3		The key to select from each option when returning the value(s) from the selected option. Country iso is the returned by default.
required	boolean		Indicates that the field is mandatory by adding an asterisk symbol (*) to the formLabel. This visual cue helps users quickly identify required fields in the form.
onValueChange	(newValue, event, reason, details?) => void		Returns newValue as CountryDetails or CountryDetails[] based on the multiple prop. Returns null if no selection has been made.
displayFlagOnSelect	boolean		Show the flag of the selected country alongside its name in the tag. Works only when multiple is true.
label	ReactNode		The text to render in FormLabel component. By default, the value of fieldName such as firstName will be transformed to display "First Name".
showLabelAboveFormField	boolean		Render form label above the form field in FormLabel component.
formLabelProps	FormLabelProps		FormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component.
helperText	ReactNode		The content to display within the FormHelperText component below the field. If the field validation fails, this content will be overridden by the corresponding error message.
errorMessage	ReactNode		Error message to be shown for a field in FormHelperText component.
hideErrorMessage	boolean		A flag to prevent replacement of helper text of a field by the error message when the validation is triggered.
formHelperTextProps	FormHelperTextProps		FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.
textFieldProps	TextFieldProps		Props to customise the Autocomplete Textfield.
ChipProps	ChipProps		Props to customise the Chip component for each input tag.