Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

social-media svelte svelte-component svelte-components

Last synced: 27 days ago
JSON representation

Host: GitHub
URL: https://github.com/pchynoweth/svelte-share-buttons-component
Owner: pchynoweth
License: mit
Created: 2020-05-21T21:14:30.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2024-05-12T10:25:55.000Z (7 months ago)
Last Synced: 2024-05-12T11:29:53.759Z (7 months ago)
Topics: social-media, svelte, svelte-component, svelte-components
Language: Svelte
Homepage: https://pchynoweth.github.io/svelte-share-buttons-component/
Size: 676 KB
Stars: 33
Watchers: 3
Forks: 10
Open Issues: 1
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        # svelte-share-buttons-component

![new-version](https://github.com/pchynoweth/svelte-share-buttons-component/workflows/new-version/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 runtiome 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

	import { Email, HackerNews, Reddit, LinkedIn, Pinterest, Telegram, Tumblr, Vk, 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.';

```

### Notes

* A media tag with a valid image url is required for pinterest.