react-share#LinkedinIcon JavaScript Examples

ShareButton = (props) => {
  const { location, siteMetadata, post } = props;
  const twitter = [ siteMetadata.social.twitter ];
  const url = siteMetadata.siteUrl + location.pathname;

  const iconSize = 30;
  const iconStyle = {
    paddingRight: "0.3em",
    marginBottom: "0.2em"
  };

  return (
    <>
      <TwitterShareButton url={url} quote={url} title={post.title} hashtags={post.tags} related={twitter} style={iconStyle}>
        <TwitterIcon size={iconSize}/>
      </TwitterShareButton>

      <LinkedinShareButton url={url} title={post.title} quote={url} source={siteMetadata.siteUrl} style={iconStyle}>
        <LinkedinIcon size={iconSize}/>
      </LinkedinShareButton>

      <FacebookShareButton url={url} quote={url} style={iconStyle}>
        <FacebookIcon size={iconSize}/>
      </FacebookShareButton>

      <RedditShareButton url={url} quote={url} title={post.title} style={iconStyle}>
        <RedditIcon size={iconSize}/>
      </RedditShareButton>

      <EmailShareButton url={url} quote={url} subject={post.title} style={iconStyle}>
        <EmailIcon size={iconSize}/>
      </EmailShareButton>
    </>
  );
}

ShareButtons = ({ }) => (
    <>
        <ShareButtonContainer>
            <FacebookShareButton url={url}>
                <FacebookIcon size={32} round />
            </FacebookShareButton>
            <button className="react-share__ShareButton" style={{ background: 'white', border: 0, margin: 0, paddingLeft: 0 }} onClick={() => {
                window.location.href = `fb-messenger://share?link=${url}`
            }}>
                <FacebookMessengerIcon size={32} round />
            </button>
            <TwitterShareButton url={url}>
                <TwitterIcon size={32} round />
            </TwitterShareButton>
            <TelegramShareButton url={url}>
                <TelegramIcon size={32} round />
            </TelegramShareButton>
            <LinkedinShareButton url={url}>
                <LinkedinIcon size={32} round />
            </LinkedinShareButton>
        </ShareButtonContainer>
    </>
)

ShareButtons = () => {
  const url = 'https://coronatracker.squarespace.com';

  return (
    <>
      <FacebookShareButton url={url}>
        <FacebookIcon size={32} round />
      </FacebookShareButton>
      <LinkedinShareButton url={url}>
        <LinkedinIcon size={32} round />
      </LinkedinShareButton>
      <TwitterShareButton url={url}>
        <TwitterIcon size={32} round />
      </TwitterShareButton>
      <RedditShareButton url={url}>
        <RedditIcon size={32} round />
      </RedditShareButton>
      <TelegramShareButton url={url}>
        <TelegramIcon size={32} round />
      </TelegramShareButton>
    </>
  );
}

ShareButtons = ({ location }) => {
  return (
    <div className="share-buttons-wrap">
      {config.shareButtons.email && (
        <EmailShareButton url={location}>
          <EmailIcon round size={32} />
        </EmailShareButton>
      )}
      {config.shareButtons.facebook && (
        <FacebookShareButton url={location}>
          <FacebookIcon round size={32} />
        </FacebookShareButton>
      )}
      {config.shareButtons.twitter && (
        <TwitterShareButton url={location}>
          <TwitterIcon round size={32} />
        </TwitterShareButton>
      )}
      {config.shareButtons.reddit && (
        <RedditShareButton url={location}>
          <RedditIcon round size={32} />
        </RedditShareButton>
      )}
      {config.shareButtons.linkedIn && (
        <LinkedinShareButton url={location}>
          <LinkedinIcon round size={32} />
        </LinkedinShareButton>
      )}
    </div>
  )
}

render() {

		if (typeof window === 'undefined') {
			return <div className="share"></div>
		}

		const item = this.props.item.customFields;

		return (
            <div className="share">
                <label>{item.shareLabel}</label>
                {item.facebook &&
                <FacebookShareButton quote={document.title} url={window.location.href} className="SocialMediaShareButton">
                    <FacebookIcon size={36} round />
                </FacebookShareButton>
                }
                {item.twitter &&
                <TwitterShareButton quote={document.title}  url={window.location.href} className="SocialMediaShareButton">
                    <TwitterIcon size={36} round />
                </TwitterShareButton>
                }
                {item.linkedIn &&
                <LinkedinShareButton quote={document.title}  url={window.location.href} className="SocialMediaShareButton">
                    <LinkedinIcon size={36} round />
                </LinkedinShareButton>
                }
            </div>

        );
	}

SocialsShare = ({ currentPage }) => {
  return (
    <div className="__social-share-container">
      <span>Distribuie pe</span>

      <FacebookShareButton url={currentPage}>
        <FacebookIcon round={true} size={30}></FacebookIcon>
      </FacebookShareButton>
      <LinkedinShareButton url={currentPage}>
        <LinkedinIcon round={true} size={30}></LinkedinIcon>
      </LinkedinShareButton>
      <TwitterShareButton url={currentPage}>
        <TwitterIcon round={true} size={30}></TwitterIcon>
      </TwitterShareButton>
    </div>
  );
}

TemplateButtons = ({ where, slug }) => {

    let shareUrl;

    if (where === 'members')
        shareUrl = ` https://gecfoss.club/${slug}`
    else
        shareUrl = ` https://gecfoss.club/${where}/${slug}`

    if (where === 'members')
        shareUrl = shareUrl.replace(/^/, "Check out this FCGEC member's profile!\n");
    else if (where === 'blog')
        shareUrl = shareUrl.replace(/^/, "Check out this Blog post on FOSS Club GEC!\n");
    else if (where === 'events')
        shareUrl = shareUrl.replace(/^/, "Check out this Event on FOSS Club GEC!\n");
    else if (where === 'projects')
        shareUrl = shareUrl.replace(/^/, "Check out this Project on FOSS Club GEC!\n");

    return (
        <div className={templateButtonsStyles.buttons}>
            <BackButton where={where} />
            <div className={templateButtonsStyles.share}>
                <EmailShareButton url={shareUrl}>
                    <EmailIcon size={48} />
                </EmailShareButton>
                <WhatsappShareButton url={shareUrl}>
                    <WhatsappIcon size={48} />
                </WhatsappShareButton>
                <LinkedinShareButton url={shareUrl}>
                    <LinkedinIcon size={48} />
                </LinkedinShareButton>
                <TwitterShareButton url={shareUrl}>
                    <TwitterIcon size={48} />
                </TwitterShareButton>
            </div>
        </div>
    )
}

Dashboard = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(creators.getCurrentUser());
  }, [dispatch]);
  const user = useSelector((state) => state.user.user);
  const url = `${window.location.origin.toString()}/store/${
    user && user.storeName && user.storeName.toLowerCase().split(' ').join('-')
  }-${user && user._id}`;
  const storeLogo = user.imageUrl ? user.imageUrl : NoLogo;
  const copied = () => {
    message.success('url copied successfully');
  };
  return (
    <div className='mainDiv' data-testid='dashboardMainDiv'>
      <div className='dashboardHeader'>
        <div className='welcomeHeader'>
          Welcome, <br />
          <span className='name'>
            {user.ownerName ? user.ownerName : 'Seller'}!
          </span>
        </div>
        <div className='dashboardLogo'>
          <img src={storeLogo} alt='Store Logo' />
        </div>
      </div>
      <div className='storeUrl'>
        <p id='storeUrl' style={{ marginBottom: '1.3rem' }}>
          {user && url}
        </p>
        <CopyToClipboard text={url}>
          <span>
            <Button ghost onClick={copied}>
              Copy URL
            </Button>
          </span>
        </CopyToClipboard>
        <div className='share'>
          <FacebookShareButton url={user && url}>
            <FacebookIcon size={32} round />
          </FacebookShareButton>
          <TwitterShareButton url={user && url}>
            <TwitterIcon size={32} round />
          </TwitterShareButton>
          <LinkedinShareButton url={user && url}>
            <LinkedinIcon size={32} round />
          </LinkedinShareButton>
          <WhatsappShareButton url={user && url}>
            <WhatsappIcon size={32} round />
          </WhatsappShareButton>
          <EmailShareButton url={user && url}>
            <EmailIcon size={32} round />
          </EmailShareButton>
        </div>
      </div>
      <div className='dashDiv'>
        <Content storeId={user._id} currency={user.currency} />
      </div>
    </div>
  );
}

ShareModal = (props) => {
  const { onRequestClose, shareModalIsOpen, shareData } = props;

  Modal.setAppElement('#__next');

  return (
    <Modal
      className={clubEventStyles.ShareModal}
      isOpen={shareModalIsOpen}
      onRequestClose={onRequestClose}
      shouldCloseOnOverlayClick={true}
      closeTimeoutMS={200}
    >
      <h2>Share This Event</h2>
      <input type="text" value={shareData.eventUrl} readOnly />
      <div className={clubEventStyles.sharePlatforms}>
        <FacebookShareButton
          url={shareData.eventUrl}
          quote={shareData.shareDescription}
          hashtag={'#bccompsciclub'}
          disabled
        >
          <FacebookIcon size={32} round />
        </FacebookShareButton>

        <TwitterShareButton
          url={shareData.eventUrl}
          title={shareData.shareDescription}
          hashtags={['bccompsciclub']}
        >
          <TwitterIcon size={32} round />
        </TwitterShareButton>

        <LinkedinShareButton
          url={shareData.eventUrl}
          title={shareData.shareTitle}
          summary={shareData.shareDescription}
        >
          <LinkedinIcon size={32} round />
        </LinkedinShareButton>

        <FacebookMessengerShareButton url={shareData.eventUrl} disabled>
          <FacebookMessengerIcon size={32} round />
        </FacebookMessengerShareButton>

        <WhatsappShareButton
          url={shareData.eventUrl}
          title={shareData.shareDescription}
        >
          <WhatsappIcon size={32} round />
        </WhatsappShareButton>

        <TelegramShareButton
          url={shareData.eventUrl}
          title={shareData.shareDescription}
        >
          <TelegramIcon size={32} round />
        </TelegramShareButton>

        <LineShareButton
          url={shareData.eventUrl}
          title={shareData.shareDescription}
        >
          <LineIcon size={32} round />
        </LineShareButton>

        <EmailShareButton
          url={shareData.eventUrl}
          subject={shareData.shareTitle}
          body={`${shareData.shareDescription}\n\n`}
        >
          <EmailIcon size={32} round />
        </EmailShareButton>
      </div>
      <button className={clubEventStyles.closeButton} onClick={onRequestClose}>
        Close
      </button>
      <p>
        Sharing to Facebook and Facebook Messenger are currently unavailable.
        Sorry about that!
      </p>
    </Modal>
  );
}

Navbar = ({ siteTitle, location }) => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "FCGEC.png" }) {
        childImageSharp {
          fluid(maxHeight: 150) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
  `)

  // For changing the style of the Navbar
  const GLOBAL_MEDIA_QUERIES = {
    small: "(max-width: 768px)",
    large: "(min-width: 769px)"
  };
  const matches = useMedia({ queries: GLOBAL_MEDIA_QUERIES });
  const activeLinkStyles = { color: "#0069ff", background: "#131314" };

  if (matches.small)
    activeLinkStyles.borderTop = "0.25rem solid #0069ff";
  else
    activeLinkStyles.borderLeft = "0.25rem solid #0069ff";

  return (
    <div className={navbarStyles.header}>
      <div>
        <h1>
          <Link to="/">
            <Img fluid={data.file.childImageSharp.fluid}
              imgStyle={{ objectFit: 'contain' }}
              alt="Logo" />
            <p>
              {/* {siteTitle} */}
              FC GEC
            </p>
          </Link>
        </h1>
      </div>
      <ul>
        <li>
          <Link activeStyle={activeLinkStyles} to="/">
            <HomeIcon className={navbarStyles.svgColor} /> <p>Home</p>
          </Link>
        </li>
        <li className={navbarStyles.hide}>
          <Link activeStyle={activeLinkStyles} to="/about">
            <AboutIcon className={navbarStyles.svgColor} /> <p>About</p>
          </Link>
        </li>
        <li>
          <Link activeStyle={activeLinkStyles} to="/blog">
            <BlogIcon className={navbarStyles.svgColor} /> <p>Blog</p>
          </Link>
        </li>
        <li>
          <Link activeStyle={activeLinkStyles} to="/events">
            <EventsIcon className={navbarStyles.svgColor} /> <p>Events</p>
          </Link>
        </li>
        <li>
          <Link activeStyle={activeLinkStyles} to="/members">
            <MembersIcon className={navbarStyles.svgColor} /> <p>Members</p>
          </Link>
        </li>
        <li>
          <Link activeStyle={activeLinkStyles} to="/projects">
            <ProjectsIcon className={navbarStyles.svgColor} /> <p>Projects</p>
          </Link>
        </li>
      </ul>

      <div className={navbarStyles.social}>
        <a href="https://github.com/fcgec">
          <GitHubIcon className={navbarStyles.linkSvg} />
        </a>
        <a href="https://twitter.com/gecfossclubb">
          <TwitterIcon size={24} className={navbarStyles.linkIcon} />
        </a>
        <a href="https://linkedin.com">
          <LinkedinIcon size={24} className={navbarStyles.linkIcon} />
        </a>
        <a href="https://gecfoss.club">
          <WebsiteIcon className={navbarStyles.linkSvg} />
        </a>
      </div>
    </div>
  )
}

function App() {
  const {
    history,
    location: { pathname },
  } = useReactRouter();

  useEffect(() => {
    if (!routes.includes(pathname)) {
      history.replace(routes[0]);
    }
    // eslint-disable-next-line
  }, []);

  const [state, dispatch] = useReducer(reducer, initialState);
  const i18n = state.i18n;

  const aRelevantLanguages = getValidLocale();

  const handleTabSelect = event => {
    history.push(mapTabToRoute(event.parameters.item.slot));
  };

  return (
    <div className="App">
      <div className="Covid19App">
        <div className="headerShellBar">
          <div className="shellBarLeft">
            <Button
              design={ButtonDesign.Transparent}
              icon="home"
              className="shellBarBtn"
              onClick={() => window.location.replace('https://myswastha.in/')}
            ></Button>
          </div>
          <div className="shellBarCenter">{i18n.HOME_TITLE}</div>
          <div className="shellBarRight">
            <Button
              design={ButtonDesign.Transparent}
              icon="world"
              className="shellBarBtn"
              onClick={() => dispatch({ type: 'openLanguageDialog' })}
            ></Button>
            <Button
              design={ButtonDesign.Transparent}
              icon="sys-help"
              className="shellBarIconBtn"
              onClick={() => dispatch({ type: 'openDialog' })}
            ></Button>
            <ActionSheet
              openBy={
                <Button
                  design={ButtonDesign.Transparent}
                  icon="share"
                  className="shellBarIconBtn"
                />
              }
              placement={'Bottom'}
            >
              <FacebookShareButton
                url="https://myswastha.in/"
                quote={i18n.SHARING_TITLE}
                hashtag="#MySwastha #FlattenTheCurve"
              >
                <FacebookIcon size={32} round={true} />
              </FacebookShareButton>
              <WhatsappShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
                <WhatsappIcon size={32} round={true} />
              </WhatsappShareButton>
              <TwitterShareButton
                url="https://myswastha.in/"
                title={i18n.SHARING_TITLE}
                hashtags={['FlattenTheCurve', 'MySwastha']}
                via={['nitish_mehta']}
              >
                <TwitterIcon size={32} round={true} />
              </TwitterShareButton>
              <LinkedinShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
                <LinkedinIcon size={32} round={true} />
              </LinkedinShareButton>
            </ActionSheet>
          </div>
        </div>
        <MessageStrip
          className="archivedNotification"
          icon={null}
          noCloseButton={true}
          noIcon={false}
          type={'Warning'}
        >
          NOTE: This app has been archived. <br />
          Kindly use{' '}
          <Link href="https://www.mygov.in/aarogya-setu-app/" target="_blank" wrap>
            Aarogya Setu{' '}
          </Link>{' '}
          app or{' '}
          <Link href="https://www.mohfw.gov.in/" target="_blank" wrap>
            Ministry of Health{' '}
          </Link>{' '}
          website for latest info. <b>Stay Safe &amp; Healthy !</b>
        </MessageStrip>

        <TabContainer className="c19IconTab" showOverflow onItemSelect={handleTabSelect} fixed>
          <Tab text={i18n.UNWELL} icon="stethoscope" selected={pathname === routes[0]}>
            <TabEligibilityChecker i18n={i18n} />
          </Tab>
          <Tab icon="notes" selected={pathname === routes[1]}>
            <TabIndiaInfo i18n={i18n} />
          </Tab>
          <Tab text={''} icon="business-objects-experience" selected={pathname === routes[2]}>
            <TabMoreInfo i18n={i18n} />
          </Tab>
        </TabContainer>

        <Dialog
          headerText={i18n.ABOUT_THIS_WEBSITE}
          stretch={false}
          open={state.isHelpDialogOpen}
          footer={
            <Button className="dialogFooterBtn" onClick={() => dispatch({ type: 'closeDialog' })}>
              {i18n.CLOSE}
            </Button>
          }
        >
          <div style={{ width: '300px', height: '400px' }}>
            <Label wrap className="disclaimerText">
              {i18n.WEBSITE_DISCLAIMER}
            </Label>
            <br />
            <br />
            <Label wrap>{i18n.WEBSITE_DESCRIPTION_1}</Label>
            <br />
            <br />
            <Label wrap>
              {i18n.WEBSITE_DESCRIPTION_2}{' '}
              <Link href="https://github.com/nitish-mehta/covid19action" target="_blank" wrap>
                GitHub{' '}
              </Link>
              {i18n.WEBSITE_DESCRIPTION_3}
            </Label>
            <br />
            <Label wrap>
              {i18n.WEBSITE_DESCRIPTION_4}{' '}
              <Link href="https://twitter.com/nitish_mehta" target="_blank" wrap>
                Twitter
              </Link>{' '}
              {i18n.AND}{' '}
              <Link href="https://www.linkedin.com/in/nitishmehta08/" target="_blank" wrap>
                LinkedIn.
              </Link>{' '}
            </Label>
            <br />
            <br />
            <Label wrap>{i18n.WEBSITE_DESCRIPTION_5}</Label>
            <br />
            <br />
            <FlexBox
              justifyContent={'SpaceBetween'}
              alignItems={'Stretch'}
              direction={'Row'}
              displayInline={false}
              fitContainer
            >
              <FacebookShareButton
                url="https://myswastha.in/"
                quote={i18n.SHARING_TITLE}
                hashtag="#MySwastha #FlattenTheCurve"
              >
                <FacebookIcon size={32} round={true} />
              </FacebookShareButton>
              <WhatsappShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
                <WhatsappIcon size={32} round={true} />
              </WhatsappShareButton>
              <TwitterShareButton
                url="https://myswastha.in/"
                title={i18n.SHARING_TITLE}
                hashtags={['FlattenTheCurve', 'MySwastha']}
                via={['nitish_mehta']}
              >
                <TwitterIcon size={32} round={true} />
              </TwitterShareButton>{' '}
              <LinkedinShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
                <LinkedinIcon size={32} round={true} />
              </LinkedinShareButton>
            </FlexBox>
          </div>
        </Dialog>

        <Dialog
          headerText={'Change Language'}
          stretch={false}
          open={state.isLanguageDialogOpen}
          footer={
            <Button
              className="dialogFooterBtn"
              onClick={() => dispatch({ type: 'closeLanguageDialog' })}
            >
              {i18n.CLOSE}
            </Button>
          }
        >
          <div style={{ width: '250px', height: '300px' }}>
            <Link
              href="
                  https://github.com/nitish-mehta/covid19action#how-can-you-help"
              target="_blank"
              wrap
            >
              (Help Improve Translations)
            </Link>{' '}
            <ul>
              {aRelevantLanguages.map(currentVal => {
                return (
                  <li key={currentVal.code}>
                    <Button
                      design={ButtonDesign.Transparent}
                      onClick={() => {
                        dispatch({ type: 'closeLanguageDialog' });
                        dispatch({
                          type: 'i18nChange',
                          payload: changeCurrentLocale(currentVal.code),
                        });
                      }}
                    >
                      {currentVal.displayText}
                    </Button>
                  </li>
                );
              })}
            </ul>
          </div>
        </Dialog>
      </div>
    </div>
  );
}