How to Code a Social Share Button with Material UI

Code your own social share button with material-ui via https:/snappywebdesign.net

Setup — Dependencies

Step #1 — The Button (Boilerplate)

import React from "react"
import { FaRegShareSquare } from "react-icons/fa"
import { makeStyles } from "@material-ui/core/styles"
import Typography from "@material-ui/core/Typography"
import Button from "@material-ui/core/Button"
import Popper from "@material-ui/core/Popper"
import PopupState, { bindToggle, bindPopper } from "material-ui-popup-state"
import Fade from "@material-ui/core/Fade"
import Paper from "@material-ui/core/Paper"
import { fade } from "@material-ui/core/styles/colorManipulator"
const useStyles = makeStyles(theme => ({
typography: {
padding: theme.spacing(2)
},
btn: {
backgroundColor: "#26a27b",
color: "rgba(255,255,255,0.9)",
fontWeight: 500,
"&:hover": {
backgroundColor: fade("#26a27b", 0.9085)
}
}
}))
export default function DropdownShareButton() {
const classes = useStyles()
return (
<PopupState variant="popper" popupId="demo-popup-popper">
{popupState => (
<div>
<Button
className={classes.btn}
color="inherit"
{...bindToggle(popupState)}
>
<FaRegShareSquare
/>
Share Article
</Button>
<Popper {...bindPopper(popupState)} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
<Paper>
<Typography className={classes.typography}>
The content of the Popper.
</Typography>
</Paper>
</Fade>
)}
</Popper>
</div>
)}
</PopupState>
)
}

Step #2 — Styling The Social Links

// https://material-ui.com/components/lists/#lists
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText'
import FacebookIcon from '@material-ui/icons/Facebook'
import TwitterIcon from '@material-ui/icons/Twitter'
import RedditIcon from '@material-ui/icons/Reddit'
import LinkIcon from '@material-ui/icons/Link'
<List dense={true} className={classes.paper}>
<ListItem
button
id='facebook'
>
<ListItemIcon>
<FacebookIcon />
</ListItemIcon>
<ListItemText primary='Facebook' />
</ListItem>
<ListItem button id='twitter'>
<ListItemIcon>
<TwitterIcon />
</ListItemIcon>
<ListItemText primary='Twitter' />
</ListItem>
<ListItem button id='reddit'>
<ListItemIcon>
<RedditIcon />
</ListItemIcon>
<ListItemText primary='Reddit' />
</ListItem>
<ListItem button id='copy'>
<ListItemIcon>
<LinkIcon />
</ListItemIcon>
<ListItemText primary='Copy Link' />
</ListItem>
</List>

Step #3 — The Switch Statement (onClick Handler)

  • Identify which platform the user wants to share the link through (which we’ll do with the event.currentTarget.id)
  • Encode the link to make it readable to servers, if the platform requires it
  • Open the link on the clients browser
const handleShare = (e) => {
e.preventDefault()
const ahref = window.location.href
const encodedAhref = encodeURIComponent(ahref)
var link
switch (e.currentTarget.id) {
case 'facebook':
link = `https://www.facebook.com/sharer/sharer.php?u=${ahref}`
open(link)
break
case 'twitter':
link = `https://twitter.com/intent/tweet?url=${encodedAhref}`
open(link)
break
case 'reddit':
link = `https://www.reddit.com/submit?url=${encodedAhref}`
open(link)
break
case 'copy':
navigator.clipboard.writeText(ahref)
break
default:
break
}
}
const open = (socialLink) => {
window.open(socialLink, '_blank')
}

That’s IT! You’re done! It’s as simple as that

Finished Social Share Button in Dropdown State
import React from "react"
import { FaRegShareSquare } from "react-icons/fa"
import List from "@material-ui/core/List"
import ListItem from "@material-ui/core/ListItem"
import ListItemIcon from "@material-ui/core/ListItemIcon"
import ListItemText from "@material-ui/core/ListItemText"
import { makeStyles } from "@material-ui/core/styles"
import Button from "@material-ui/core/Button"
import Popper from "@material-ui/core/Popper"
import PopupState, { bindToggle, bindPopper } from "material-ui-popup-state"
import Fade from "@material-ui/core/Fade"
import Paper from "@material-ui/core/Paper"
import { fade } from "@material-ui/core/styles/colorManipulator"
import FacebookIcon from "@material-ui/icons/Facebook"
import TwitterIcon from "@material-ui/icons/Twitter"
import RedditIcon from "@material-ui/icons/Reddit"
import LinkIcon from "@material-ui/icons/Link"
const useStyles = makeStyles(theme => ({
typography: {
padding: theme.spacing(2)
},
btn: {
backgroundColor: "#26a27b",
color: "rgba(255,255,255,0.9)",
fontWeight: 500,
"&:hover": {
backgroundColor: fade("#26a27b", 0.9085)
}
}
}))
export default function DropdownShareButton() {
const classes = useStyles()
const handleShare = e => {
e.preventDefault()
const ahref = window.location.href
const encodedAhref = encodeURIComponent(ahref)
var link
switch (e.currentTarget.id) {
case "facebook":
link = `https://www.facebook.com/sharer/sharer.php?u=${ahref}`
open(link)
break
case "twitter":
link = `https://twitter.com/intent/tweet?url=${encodedAhref}`
open(link)
break
case "reddit":
link = `https://www.reddit.com/submit?url=${encodedAhref}`
open(link)
break
case "copy":
navigator.clipboard.writeText(ahref)
break
default:
break
}
}
const open = socialLink => {
window.open(socialLink, "_blank")
}
return (
<PopupState variant="popper" popupId="demo-popup-popper">
{popupState => (
<div>
<Button
className={classes.btn}
color="inherit"
{...bindToggle(popupState)}
>
<FaRegShareSquare
/>
Share Article
</Button>
<Popper {...bindPopper(popupState)} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
<Paper>
<List dense={true} className={classes.paper}>
<ListItem
button
id="facebook"
onClick={handleShare}
>
<ListItemIcon>
<FacebookIcon />
</ListItemIcon>
<ListItemText primary="Facebook" />
</ListItem>
<ListItem
button
id="twitter"
onClick={handleShare}
>
<ListItemIcon>
<TwitterIcon />
</ListItemIcon>
<ListItemText primary="Twitter" />
</ListItem>
<ListItem
button
id="reddit"
onClick={handleShare}
>
<ListItemIcon>
<RedditIcon />
</ListItemIcon>
<ListItemText primary="Reddit" />
</ListItem>
<ListItem
button
id="copy"
onClick={handleShare}
>
<ListItemIcon>
<LinkIcon />
</ListItemIcon>
<ListItemText primary="Copy Link" />
</ListItem>
</List>
</Paper>
</Fade>
)}
</Popper>
</div>
)}
</PopupState>
)
}

Bonus Section: Extending The Example

  1. Utilize a Snackbar to display a success alert to the user when they click “Copy Link”
  2. Utilize a ClickAwayListener to close the Popper when the user clicks outside of it
  3. Utilize javascript to close the Popper after the user has clicked a ListItem
  4. Utilize the Hidden component to hide the “Copy Link” ListItem on mobile devices (due to compatibility of the navigator.clipboard.writeText function)

--

--

--

Freelance web designer and operator of Snappy Web Design https://snappywebdesign.net/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What I Don’t Like About Node.js 18

nodejs

What’s Next in Ecommerce

Next.js logo hero image

How to use Axios in Create-React-App

Why I Love RxJS: A Ring Buffer in 1 Line of Code

Integrate medium blog posts into your website with node.js

10 Things Front-End Developers Should Learn in 2021

Flatiron School Phase 2 Project

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Snappy Web Design

Snappy Web Design

Freelance web designer and operator of Snappy Web Design https://snappywebdesign.net/

More from Medium

Uniting React Router and Angular’s UI-Router

CRUD Is Dead, Long Live CRUD!

How to Google Signin within a Ionic/Vue.js APP using Firebase

Integrate CATF Time with Lighthouse Audit

Image source: Walmart.com The first screen a user visits on a website is called “Content Above The Fold”. The content that a user sees after scrolling down the page is referred to as “Content Below the Fold”.