svelte-share-buttons-component

KO | EN

gitlite — search

#javascript #python #react #ai #golang #go #machine-learning #rust #docker #java #nodejs #windows #kubernetes #awesome-list

svelte-share-buttons-component

(★ 41)

No description available.

svelte-share-buttons-component Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# svelte-share-buttons-component

![new-version](https://github.com/pchynoweth/svelte-share-buttons-component/workflows/new-version/badge.svg)
![Demo Build Test](https://github.com/pchynoweth/svelte-share-buttons-component/workflows/Demo%20Build%20Test/badge.svg)
![Playwright Tests](https://github.com/pchynoweth/svelte-share-buttons-component/workflows/Playwright%20Tests/badge.svg)
![Type Check](https://github.com/pchynoweth/svelte-share-buttons-component/workflows/Type%20Check/badge.svg)
[![version](https://img.shields.io/npm/v/svelte-share-buttons-component.svg?style=flat-square)](http://npm.im/svelte-share-buttons-component)

Simple Svelte based share buttons component with no tracking.  Based on HTML share buttons from https://github.com/mxstbr/sharingbuttons.io.

## Installation

### Using npm

#### Sapper or Other Svelte Bundler

For Sapper you need to install the package as a dev module to so it gets compiled.  If you install it as a runtime dependency you will 500 errors on the server side.  This is explained [here](https://github.com/sveltejs/sapper-template#using-external-components).

```bash
$ npm i -D svelte-share-buttons-component
```

### PureJS

```bash
$ npm i --save svelte-share-buttons-component
```

## Example

https://pchynoweth.github.io/svelte-share-buttons-component/

## Usage

A basic demo app can be found at https://github.com/pchynoweth/svelte-share-buttons-component/tree/master/demo.

Basic usage from svelte looks like this:

```html
<script>
	import { Bluesky, Discord, Email, HackerNews, Mastodon, Reddit, LinkedIn, Pinterest, SMS, Telegram, Threads, Tumblr, Vk, WebShare, WhatsApp, Xing, Facebook, X, Line } from 'svelte-share-buttons-component';

const url = 'https://pchynoweth.github.io/svelte-share-buttons-component/';
	const title = 'Svelte Share Buttons Component';
	const desc = 'Svelte based social media share buttons component with no tracking.';
</script>

<Bluesky class="share-button" text="{title}" {url} />
<Discord class="share-button" />
<Email subject="{title}" body="{desc} {url}" />
<HackerNews class="share-button" {title} {url} />
<Mastodon class="share-button" text="{title}" {url} instance="mastodon.social" />
<Reddit class="share-button" {title} {url} />
<LinkedIn class="share-button" {url} />
<Tumblr class="share-button" {title} {url} caption="{title}" />
<Pinterest class="share-button" {url} media="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/200px-Svelte_Logo.svg.png" description={title} />
<SMS class="share-button" text="{title} {url}" />
<Telegram class="share-button" text={title} {url} />
<Threads class="share-button" text="{title}" {url} />
<Vk class="share-button" {title} {url} />
<WebShare class="share-button" {title} text={desc} {url} />
<WhatsApp class="share-button" text="{title} {url}" />
<Xing class="share-button" {title} {url} />
<Facebook class="share-button" quote="{title}" {url} />
<X class="share-button" text="{title}" {url} hashtags="github,svelte" via="username" related="other,users" />
<Line class="share-button" {url} />
```

### Notes

* A media tag with a valid image url is required for pinterest.
* The Mastodon component requires an `instance` prop to specify the user's Mastodon instance domain (defaults to "mastodon.social"). Since Mastodon is decentralized, users have accounts on different instances.
* The WebShare component uses the [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API), which allows sharing content to any app that supports receiving shared data. It only works in secure contexts (HTTPS) and on supported browsers. The button will be disabled if the Web Share API is not available.
* The Discord component opens Discord's direct messages by default. You can optionally pass an `inviteUrl` prop to link directly to a Discord server invite (e.g., `inviteUrl="https://discord.gg/yourServerCode"`).

svelte-share-buttons-component

svelte-share-buttons-component Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

svelte-share-buttons-component

svelte-share-buttons-component Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README