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 |
|
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)}>×</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 |
|
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't find a study now, or you'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>
)
}
