ShareModal

A ShareModal is build with a design system components and guidelines that enables users to share a link or content effortlessly. It provides options to share via social media, copy the link, or send via email, ensuring a seamless and accessible sharing experience.

Available from eds-core/1.14.0

Figma LibraryView in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { ShareModal } from '@adaptavant/eds-core';

Default​

const [openModal, setOpenModal] = React.useState(false);

const closeModal = () => {
	setOpenModal(false);
};

return (
	<React.Fragment>
		<Button
			iconStart={ShareIcon}
			label="Share"
			onClick={() => {
				setOpenModal(true);
			}}
			size="standard"
			variant="neutralSecondary"
		>
			Share
		</Button>
		<ShareModal
			className="share-modal"
			closeButtonProps={{
				label: 'Close share modal',
				onClick: closeModal,
			}}
			link="https://go.setmore.com"
			onClose={closeModal}
			open={openModal}
			translations={{
				content: 'Select how you want to share this page',
				optionLabels: {
					copyLabel: 'Copy Link',
					emailLabel: 'Email',
					facebookLabel: 'Facebook',
					messengerLabel: 'Messenger',
					whatsappLabel: 'Whatsapp',
				},
				title: 'Share this page',
			}}
		/>
	</React.Fragment>
);
View in Playroom

With Custom Options​

const [openModal, setOpenModal] = React.useState(false);

const closeModal = () => {
  setOpenModal(false);
};

return (
  <React.Fragment>
    <Button
      iconStart={ShareIcon}
      label="Share"
      onClick={() => {
        setOpenModal(true);
      }}
      size="standard"
      variant="neutralSecondary"
    >
      Share
    </Button>
    <ShareModal
      className="share-modal"
      classNames={{
        modalWrapper: `z-[1201]`,
      }}
      closeButtonProps={{
        label: "Modal Close Button",
        onClick: closeModal,
      }}
      link="https://go.setmore.com"
      headingImageProps={{
        label: "Setmore Logo",
        src: "https://assets.setmore.com/website/v2/images/favicon/tree-icon/favicon-32x32.png",
      }}
      onClose={closeModal}
      open={openModal}
      shareOptions={[
        {
          icon: TwitterIcon,
          id: "share-via-twitter",
          label: "Twitter",
          onClick: () => {
            window.open(
              "https://twitter.com/intent/tweet?url=somelink",
              "_blank"
            );
          },
        },
        {
          icon: LinkedinIcon,
          id: "share-via-linkedin",
          label: "Linkedin",
          onClick: () => {
            window.open(
              "https://www.linkedin.com/sharing/share-offsite/?url=somelink",
              "_blank"
            );
          },
        },
      ]}
      translations={{
        content: "Select how you want to share this page",
        optionLabels: {
          copyLabel: "Copy Link",
          emailLabel: "Email",
        },
        title: "Share this page",
      }}
    />
  </React.Fragment>
);
View in Playroom

API Reference​

Share Modal

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

ShareModal parts​

const [openModal, setOpenModal] = React.useState(false);

const closeModal = () => {
  setOpenModal(false);
};

return (
  <React.Fragment>
    <Button
      iconStart={ShareIcon}
      label="Share"
      onClick={() => {
        setOpenModal(true);
      }}
      size="standard"
      variant="neutralSecondary"
    >
      Share
    </Button>
    <ShareModal
      className="border-4"
      classNames={{
        title: "text-positive-secondary",
        modalHeader: "mx-2 rounded-md p-2 bg-positive-secondary",
        modalContent: "p-3 bg-caution-secondary",
        modalHeaderContent: "text-critical-secondary border-4 bg-critical-secondary-hover",
        modalWrapper: "z-10 bg-opacity-90",
        content: "font-stronger",
        optionStack: "p-4 border-2 border-input-critical-pressed rounded-md",
        optionButton: "text-positive-secondary font-stronger",
      }}
      closeButtonProps={{
        label: "Close share modal",
        onClick: closeModal,
      }}
      link="https://go.setmore.com"
      onClose={closeModal}
      open={openModal}
      translations={{
        content: "Select how you want to share this page",
        optionLabels: {
          copyLabel: "Copy Link",
          emailLabel: "Email",
          facebookLabel: "Facebook",
          messengerLabel: "Messenger",
          whatsappLabel: "Whatsapp",
        },
        title: "Share this page",
      }}
    />
  </React.Fragment>
);
View in Playroom

Stylable Parts

Description

root

The container that wraps the share modal.

title

The title displayed in the header of the share modal.

modalHeader

The container that holds and organizes the heading components.

modalHeaderContent

The container that holds the heading text and icon.

modalWrapper

The container that wraps the whole modal element, acts as the overlay as well.

modalContent

The container that holds the main content within the modal body.

content

The text content displayed within the modal body.

optionStack

The container that holds the buttons with sharing options.

optionButton

A button that provides various options for sharing the link or content.