sshare v0.2.0

sshare

A tiny, accessible, Medium-like share dialog in about ~2.2kb gzipped. Demo here.

Install

npm i sshare --save

Usage

import sshare from 'sshare'

/**
 * Import sharers or create your own
 */
import twitterURL from 'sshare/sharers/twitter.js'
import facebookURL from 'sshare/sharers/facebook.js'
import emailURL from 'sshare/sharers/email.js'

const share = sshare({
  context: '.js-sharable',
  transitionSpeed: 200
}, [
  highlightedText => `<a href="${twitterURL(highlightedText)}" target="_blank"><img src="twitter.svg"/></a>`,
  highlightedText => `<a href="${facebookURL(highlightedText)}" target="_blank"><img src="facebook.svg"/></a>`,
  highlightedText => `<a href="${emailURL(highlightedText)}"><img src="email.svg"/></a>`,
])

share.destroy() // removes all markup and listeners

The generated markup for the above looks like this:

<div class="sshare is-tacked is-active" aria-label="Share Dialog" aria-hidden="false" tabindex="0">
  <div class="sshare__inner">
    <a href="...shareurl..." target="_blank"><img src="twitter.svg"/></a>
    <a href="...shareurl..." target="_blank"><img src="facebook.svg"/></a>
    <a href="...shareurl..."><img src="email.svg"/></a>
  </div>
</div>

And the CSS from the demo looks like this:

.sshare {
  position: absolute;
  visibility: hidden;
  top: 0;
  left: 0;
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(.24,.82,.35,1);
}
.sshare:focus {
  outline: 0;
}
.sshare.is-tacked {
  visibility: visible;
}
.sshare.is-active {
  opacity: 1;
}
.sshare.is-hiding {
  opacity: 0;
}
.sshare__inner {
  display: flex;
  background: white;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,0.2);
}
.sshare__inner::before {
  content: '';
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  transform: translateY(40%) rotate(45deg);
  background-color: white;
}
.sshare__inner a {
  position: relative;
  width: 35px;
  height: 35px;
  line-height: 35px;
  color: black;
}
.sshare__inner a:hover {
  color: $theme;
}
.sshare__inner a:focus {
  color: $theme;
  outline: 0;
}
.sshare__inner a svg {
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  width: 14px;
  height: 14px;
}

Example

To run the example, clone this repo, then:

# move into example dir
cd srraf/example
# install deps
npm i
# compile JS
npm run js:build # or js:watch
# serve index.html and update with changes
live-server 

MIT License