Documentation
Feedback
Guides
Storefront Development

Storefront Development
Region Modal

This component is a modal with some region configurations.

It's a Modal with some region configurations. The component is part of Regionalization feature.

Import

Import the component from @faststore/ui

_10
import { RegionModal } from '@faststore/ui'

Import Styles

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


Usage

Example
Code

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-region-modal
titlestringThe region modal's title.Set your location
descriptionstringDescription for region modal.Prices, offers and availability may vary according to your location.
closeButtonAriaLabelstringClose button aria-label.Close Region Modal
idkPostalCodeLinkPropsPartial<LinkProps<LinkElementType>>Props for the link `I don't know my Postal Code`.
linkTextPartial<LinkProps<LinkElementType>>Props for the `I don't know my Postal Code` link on modal body content.
errorMessagestringMessage of error for input.
inputRefMutableRefObject<HTMLInputElement>Postal code input's ref.
inputValuestringPostal code input's value.
inputLabelstringPostal code input's label.Postal Code
fadeOutOnSubmitfalse | trueEnables fadeOut effect on modal after onSubmit function
overlayPropsPropsProps forwarded to the `Overlay` component.
onClose() => voidFunction called when Close button is clicked.
onInput(event: React.FormEvent<HTMLInputElement>) => voidCallback function when input is typed.
onSubmit() => voidCallback function when form is submitted.
onClear() => voidCallback function when the input clear button is clicked.
aria-labelledbystringIdentifies the element (or elements) that labels the current element. @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
isOpenfalse | trueA boolean value that represents the state of the Modal
onDismiss() => voidEvent emitted when the modal is closed

Design Tokens

Local tokenDefault value/Global token linked
--fs-region-modal-margin-bottomvar(--fs-spacing-6)
--fs-region-modal-link-padding0
--fs-region-modal-link-column-gapvar(--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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page