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.

Example

Code

Usage

Import the component


_10import { RegionModal } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:


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

For details, see Importing FastStore UI component styles.

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)`

Data attributes

You can target and override RegionModal styles using the following data attributes:

data-fs-region-modal

data-fs-region-modal-input

data-fs-region-modal-link

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.	`Offers and availability vary by 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`
inputButtonActionText	`string`	The text displayed on the InputField Button. Suggestion: maximum 9 characters.	`Apply`
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.
dismissible	`false \| true`	Determines if the modal can be dismissed using the close button or the Escape key.	`true`
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
onEntered	`() => void`	Callback function when the modal is opened.
isOpen	`false \| true`	A boolean value that represents the state of the Modal.
onDismiss	`() => void`	Event emitted when the modal is closed.
disableEscapeKeyDown	`false \| true`	Disable being closed using the Escape key.