@commercelayer/react-components
Version:
The Official Commerce Layer React Components
51 lines (50 loc) • 2.19 kB
TypeScript
import { type JSX } from "react";
import type { AddressStateSelectName, BaseSelectComponentProps, Option } from "../../typings/index";
import { type States } from "../../utils/countryStateCity";
type Props = Omit<BaseSelectComponentProps, "options" | "name" | "placeholder"> & {
name: AddressStateSelectName;
required?: boolean;
disabled?: boolean;
/**
* Optional class name for the input field.
*/
inputClassName?: string;
/**
* Optional placeholder for the input field.
*/
inputPlaceholder?: string;
/**
* Optional class name for the select field.
*/
selectClassName?: string;
/**
* Optional placeholder for the select field.
*/
selectPlaceholder?: Option;
/**
* Optional states list to extend the default one.
* This component will try to render a select getting as options the states found for the selected country.
* If the country has no states, it will render a text input field instead.
*/
states?: States;
} & Pick<JSX.IntrinsicElements["select"], "className" | "id" | "style">;
/**
* The AddressInput component creates a form `select` related to the `state_code` attribute of the `address` object.
*
* It requires a `name` prop to define the field name associated with the select and accepts most of HTML `select` tag standard props.
*
* <span title="Name prop" type="info">
* The `name` prop must respect the convention of mentioning one of the available addresses forms (`billing_address` or `shipping_address`) concatenated to the `state_code` address attribute with a `_` separator. Eg.: `billing_address_state_code`.
* </span>
*
* <span title="Requirement" type="warning">
* It must to be used inside either the `<BillingAddressForm>` or the `<ShippingAddressForm>` component.
* </span>
*
* <span title="Fields" type="info">
* Check the `addresses` resource from our [Core API documentation](https://docs.commercelayer.io/core/v/api-reference/addresses/object)
* for more details about the available attributes to render.
* </span>
*/
export declare function AddressStateSelector(props: Props): JSX.Element;
export default AddressStateSelector;