RegionModal

This component is a modal with some region configurations.

The RegionModal is part of the Regionalization feature and provides a modal interface for selecting and configuring region-specific options. It extends the functionality of the Modal component, making it adaptable for region-related settings within your FastStore application.

Import

Import the component from @faststore/ui


_10import { RegionModal } from '@faststore/ui'

Import styles into your FastStore project

To apply the styles of this component in your FastStore project, add the following line to your stylesheet:


_10@import '@faststore/ui/src/components/organisms/RegionModal/styles.scss';

Follow the instructions in the Importing FastStore UI component styles guide.

Usage

Example

Code

Props

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).	`fs-region-modal`
title	`string`	The region modal's title.	`Set your location`
description	`string`	Description for region modal.	`Prices, offers and availability may vary according to your location.`
closeButtonAriaLabel	`string`	Close button aria-label.	`Close Region Modal`
idkPostalCodeLinkProps	`Partial<LinkProps<LinkElementType>>`	Props for the link `I don't know my Postal Code`.
linkText	`Partial<LinkProps<LinkElementType>>`	Props for the `I don't know my Postal Code` link on modal body content.
errorMessage	`string`	Message of error for input.
inputRef	`MutableRefObject<HTMLInputElement>`	Postal code input's ref.
inputValue	`string`	Postal code input's value.
inputLabel	`string`	Postal code input's label.	`Postal Code`
fadeOutOnSubmit	`false \| true`	Enables fadeOut effect on modal after onSubmit function
overlayProps	`Props`	Props forwarded to the `Overlay` component.
onClose	`() => void`	Function called when Close button is clicked.
onInput	`(event: React.FormEvent<HTMLInputElement>) => void`	Callback function when input is typed.
onSubmit	`() => void`	Callback function when form is submitted.
onClear	`() => void`	Callback function when the input clear button is clicked.
aria-labelledby	`string`	Identifies the element (or elements) that labels the current element. @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
isOpen	`false \| true`	A boolean value that represents the state of the Modal
onDismiss	`() => void`	Event emitted when the modal is closed

Design Tokens

Local token	Default value/Global token linked
`--fs-region-modal-margin-bottom`	`var(--fs-spacing-6)`

`--fs-region-modal-link-padding`	`0`
`--fs-region-modal-link-column-gap`	`var(--fs-spacing-0)`
`--fs-region-modal-link-color`	`var(--fs-color-link)`

Customization

For further customization, you can use the following data attributes:

data-fs-region-modal

data-fs-region-modal-input

data-fs-region-modal-link