Grapes homepage1.57.0
  • Guide
  • Tokens
  • Components
    Grapes on GithubGrapes on Figma
    Interaction
    • Button
    • IconButton
    • FloatingActionBar
    • Link
    Icons
    • Icon
    • HighlightIcon
    Form
    • AmountInput
    • Autocomplete
    • AutocompleteMultiple
    • AutocompletePlace
    • CheckboxBox
    • CheckboxField
    • DatePicker
    • FormField
    • Input
    • OptionGroup
    • PasswordInput
    • PhoneInput
    • RadioBox
    • RadioField
    • RadioGroup
    • Select
    • SwitchField
    • TextArea
    • TextInput
    • Upload
    • UploadButton
    Feedback
    • Badge
    • Banner
    • Callout
    • EmptyState
    • Modal
    • ModalSlideshow
    • DeprecatedModalSlideshow
    • PageModal
    • Skeleton
    • Tag
    • Toast
    • Tooltip
    Data display
    • Accordion
    • Avatar
    • Box
    • Calendar
    • CalendarRange
    • CollapsibleList
    • FileCard
    • InfoTip
    • ListBox
    • ListView
    • Panel
    • SidePanel
    • DeprecatedPreview
    • Table
    • Timeline
    • useDateFormatter
    Navigation
    • DropdownItem
    • DropdownMenu
    • Navigation
    • NavigationItem
    • Popover
    • Tabs

    DeprecatedModalSlideshow

    DeprecatedModalSlideshow is a special Modal using a Slideshow as header.

    View source code
    • Usage
    • Props
    • Accessibility

    Basic usage

    const Demo = () => {
      const [isOpen, setIsOpen] = useState(false);
    
      return (
        <>
          <Button text="Open the modal" onClick={() => setIsOpen(true)} />
          <DeprecatedModalSlideshow
            slides={[
              {
                title: "Title slide 1",
                content: "Content slide 1",
                illustration: <img src="/slide-1.webp" alt="" />,
              },
              {
                title: "Title slide 2",
                content: "Content slide 2",
                illustration: <img src="/slide-2.webp" alt="" />,
              },
              {
                title: "Title slide 3",
                content: "Content slide 3",
                illustration: <img src="/slide-3.webp" alt="" />,
              },
            ]}
            translations={{
              cancel: "Cancel",
              previous: "Back",
              next: "Next",
              done: "Action wording",
            }}
            isOpen={isOpen}
            onCancel={() => setIsOpen(false)}
            onClose={() => setIsOpen(false)}
            onDone={() => setIsOpen(false)}
          />
        </>
      );
    };