Skip to content
A tiny, accessible, Medium-like share dialog in about ~2.2kb gzipped.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
package
README.md
screenshot.png

README.md

sshare

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

js-standard-style

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

You can’t perform that action at this time.