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 PartsDescription
rootThe container that wraps the share modal.
titleThe title displayed in the header of the share modal.
modalHeaderThe container that holds and organizes the heading components.
modalHeaderContentThe container that holds the heading text and icon.
modalWrapperThe container that wraps the whole modal element, acts as the overlay as well.
modalContentThe container that holds the main content within the modal body.
contentThe text content displayed within the modal body.
optionStackThe container that holds the buttons with sharing options.
optionButtonA button that provides various options for sharing the link or content.