react-share#PinterestShareButton JavaScript Examples

The following examples show how to use react-share#PinterestShareButton. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ShareModal.js    From mern-social-media with MIT License 5 votes vote down vote up
ShareModal = ({ url, theme, setIsShare }) => {
  return (
    <div className="share_modal">
      <div className="share_modal-container">
        <div className="share_modal-header">
          <span>Share to...</span>
          <span onClick={() => setIsShare(false)}>&times;</span>
        </div>
        <div
          className=" share_modal-body"
          style={{ filter: theme ? "invert(1)" : "invert(0)" }}
        >
          <FacebookShareButton url={url}>
            <FacebookIcon round={true} size={32} />
          </FacebookShareButton>

          <TwitterShareButton url={url}>
            <TwitterIcon round={true} size={32} />
          </TwitterShareButton>

          <EmailShareButton url={url}>
            <EmailIcon round={true} size={32} />
          </EmailShareButton>

          <TelegramShareButton url={url}>
            <TelegramIcon round={true} size={32} />
          </TelegramShareButton>

          <WhatsappShareButton url={url}>
            <WhatsappIcon round={true} size={32} />
          </WhatsappShareButton>

          <PinterestShareButton url={url}>
            <PinterestIcon round={true} size={32} />
          </PinterestShareButton>

          <RedditShareButton url={url}>
            <RedditIcon round={true} size={32} />
          </RedditShareButton>

          <LinkedinShareButton url={url}>
            <LineIcon round={true} size={32} />
          </LinkedinShareButton>
        </div>
      </div>
    </div>
  );
}
Example #2
Source File: index.js    From covid-trials-dashboard with MIT License 4 votes vote down vote up
MapContainer = ({ pins }) => {
  const theme = useTheme()
  const isBigEnough = useMediaQuery(theme.breakpoints.up('sm'))
  const { t } = useTranslation()
  const [email, setEmail] = useState()
  return (
    <Wrapper>
      <div style={{ paddingBottom: '2rem' }}>
        <MaxWidth>
          <Typography
            variant='h1'
            style={{
              fontSize: '2em',
              marginTop: '1.3rem',
              marginLeft: '0.5rem',
            }}
            gutterBottom
          >
            {t('title')}
          </Typography>
          {isBigEnough && (
            <Typography
              style={{
                fontSize: '1.3em',
                marginBottom: '1.3rem',
                marginLeft: '0.5rem',
              }}
              gutterBottom
              variant='h2'
            >
              {t('subtitle')}
            </Typography>
          )}
          <MapDiv>
            <Map pins={pins} />
          </MapDiv>
          <div
            style={{
              display: 'flex',
              flexDirection: 'row-reverse',
            }}
          >
            <FacebookShareButton
              style={{ marginRight: '0.5rem' }}
              url={'https://www.coviddash.org'}
              quote={'Volunteer for COVID-19 Vaccination trials near you'}
              onClick={() => {
                ReactGA.event({
                  category: 'volunteer',
                  action: 'Clicked share via facebook',
                })
              }}
            >
              <FacebookIcon size={30} round={true} />
            </FacebookShareButton>
            <TwitterShareButton
              style={{ marginRight: '0.5rem' }}
              url={'https://www.coviddash.org'}
              title={'Volunteer for COVID-19 Vaccination trials near you'}
              hashtags={['COVID19', 'Volunteer', 'Coronavirus', 'Vaccines']}
              onClick={() => {
                ReactGA.event({
                  category: 'volunteer',
                  action: 'Clicked share via twitter',
                })
              }}
            >
              <TwitterIcon size={30} round={true} />
            </TwitterShareButton>
            <PinterestShareButton
              url={'https://www.coviddash.org'}
              style={{ marginRight: '0.5rem' }}
              media={'https://coviddash.org/CovidTrialVolunteer.png'}
              className='mr-2'
              onClick={() => {
                ReactGA.event({
                  category: 'volunteer',
                  action: 'Clicked share via pinterest',
                })
              }}
            >
              <PinterestIcon size={30} round={true} />
            </PinterestShareButton>
            <EmailShareButton
              style={{ marginRight: '0.5rem' }}
              subject={
                'I thought you might be interested in volunteering for COVID-19 Vaccination trials'
              }
              separator=' '
              body={
                'I thought you may be interested in volunteering to help save lives. Covidtrialdash.org helps you find vaccination trials near you.'
              }
              url={'https://www.covidtrialdash.org'}
              className='mr-2'
              openShareDialogOnClick={true}
              onClick={() => {
                ReactGA.event({
                  category: 'volunteer',
                  action: 'Clicked share via email',
                })
              }}
            >
              <EmailIcon size={30} round={true} />
            </EmailShareButton>
            <WhatsappShareButton
              style={{ marginRight: '0.5rem' }}
              url={'https://www.coviddash.org'}
              title='Volunteer for COVID Vaccination trials in your area.'
              className='mr-2'
              onClick={() => {
                ReactGA.event({
                  category: 'volunteer',
                  action: 'Clicked share via whatsapp',
                })
              }}
            >
              <WhatsappIcon size={30} round={true} />
            </WhatsappShareButton>
          </div>
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <div style={{ fontSize: '17px' }}>
              If you can&apos;t find a study now, or you&apos;d like to stay up
              to date, sign up for our email list!
            </div>
            <MailchimpSubscribe
              url={process.env.REACT_APP_MAILCHIMP_URL}
              render={({ subscribe, status, message }) => (
                <div style={{ marginTop: '1rem', width: '280px' }}>
                  <form
                    onSubmit={event => {
                      event.preventDefault()
                      subscribe({ EMAIL: email })
                    }}
                  >
                    <TextField
                      id='subscribe'
                      label='Your email'
                      variant='outlined'
                      style={{ width: '100%' }}
                      onChange={e => setEmail(e.target.value)}
                    />
                    <div style={{ marginTop: '1rem' }}>
                      <Button
                        type='submit'
                        fullWidth
                        variant='contained'
                        color='primary'
                      >
                        Subscribe
                      </Button>
                    </div>
                  </form>
                  {status === 'sending' && (
                    <p style={{ color: 'blue', textAlign: 'center' }}>
                      Sending...
                    </p>
                  )}
                  {status === 'error' && (
                    <p
                      style={{ color: 'red', textAlign: 'center' }}
                      dangerouslySetInnerHTML={{ __html: message }}
                    />
                  )}
                  {status === 'success' && (
                    <p style={{ color: 'green', textAlign: 'center' }}>
                      Subscribed!
                    </p>
                  )}
                </div>
              )}
            />
            <div style={{ fontSize: '17px', paddingTop: '2rem' }}>
              For immediate assistance, call us at +1 (224) 444-0082
            </div>
          </div>
        </MaxWidth>
      </div>
      <HomeSections />
    </Wrapper>
  )
}