Sharee jsAppearance
Getting Started
Using NPM or Yarn
1. Install Sharee
sh
npm i sharee
2. Add target element
html
<div id="sharee"></div>
3. Import and initialize Sharee
js
import Sharee from 'sharee';
new Sharee(document.querySelector('#sharee'))
Using CDN
1. Import Sharee
html
<script src="https://cdn.jsdelivr.net/gh/parsagholipour/sharee@latest/dist/sharee.min.js"></script>
2. Add target element
html
<div id="sharee"></div>
3. Initialize Sharee
js
new Sharee(document.querySelector('#sharee'))
Demos
Text Selection
Normal
Dropdown
Fixed
Options
| Option | Values | Description |
|---|---|---|
| lang | en,fa | You can change the language to one of predefined languages or your own custom |
| langs | {en: {CopiedSuccessfully: "Copied Successfully!!!!"}} | Add your own language or customize current values |
| drivers | copy, telegram, facebook, whatsapp, twitter, linkedin | Choose drivers you want |
| showTransitionDuration | 200ms | Show transition duration |
| shareLink | https://example.com | By default current page's url |
| shareText | Your Text | By default current page's title |
| ripple | boolean | By default true. |
| mode | dropdown,text,normal,fixed | By default normal |
| modeOptions | Variant based on mode | Each mode has some options |
Customization
Change language keys
js
new Sharee(document.querySelector('#sharee-normal'), {
lang: 'en',
langs: {
en: {
Telegram: 'Tallgram' // Overwrite
}
}
})
Make your own driver
js
function customDriver(lang, options) {
this.lang = lang
this.options = options
this.buttonText = 'Telegram'
this.icon = '<svg style="transform:scale(0.83)" fill="currentColor" width="512px" height="512px" viewBox="-32 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"/></svg>'
this.backgroundColor = '#366a81'
this.backgroundHoverColor = '#0371aa'
this.textColor = '#fff'
this.textHoverColor = '#fff'
this.rippleColor = '#ffffff75'
this.getLink = () => {
return 'http://google.com'
}
this.getButtonText = () => {
return this.lang[this.buttonText.replaceAll(' ', '_')] || this.buttonText;
}
}
Sharee.addDriver('customDriver', customDriver)
new Sharee(document.querySelector('#sharee'), {
lang: 'en',
drivers: ['customDriver']
})