Social links library

social-links is a set of social media share links working with React and Svelte (at the moment). It takes another approach that most common libraries of that sort: it uses links instead of third party scripts embedded in buttons.

Please use it if you care for your user privacy. It features:

typescript support
a11y:
- links have aria-label
- :focus css is up to you
monorepo: it’s easy to add a social media or a framework
no tracking
easily customizable:

Go ahead, try them out, it’s working great!

Supported languages:

React

Svelte

Summary

Why another library to display sharing ~~buttons~~ links?
Installation
Styling customization
Components
- Facebook
- HackerNews
- LinkedIn
- Reddit
- Twitter
Contribute
- Add a social media
- Add a framework

There are already countless ones:

vanilla JS components:
- sharingbuttons.io
- sharer.js
react components:
- next-share
- react-share
svelte components:
- sveltekit-share-buttons
- svelte-share-buttons-component

What they lack:

they are all button based while a link element (<a href="">) is enough
they are not all well maintained
they are all for only one framework

Installation

React

npm i --save react-social-links

Svelte

npm i --save-dev svelte-social-links

Styling customization

round size borderRadius (used if round is false or not set) color (hex, rgb, html colors...) iconColor (hex, rgb, html colors...)

Component props

Styling props

All components have the same optional styling props:

Props	Type	Default Value	Usage
color	`string`	social media color	icon background color
iconColor	`string`	`white`	icon color
borderRadius	`number`	`8`	border radius
round	`boolean`	`false`	make the icon round
size	`number`	`32`	size of the icon

Facebook

Facebook - how to use

<FacebookLink
	url="https://social-links-doc.vercel.app/"
	hashtag="socialShareLinks"
/>

Facebook - props

Props	Render as	Type	Optional	Prefix	Description
url	u	`string`			url of the page you are sharing. Facebook will crawl the url to retrieve open graph attributes
hashtag	hashtag	`string`	Yes	#	unique hashtag that will be added at the end of the Facebook post. It should be provided without the "#" character

HackerNews

HackerNews - how to use

<HackerNewsLink
	url="https://social-links-doc.vercel.app/"
	title="Social media share links working with React and Svelte"
/>

HackerNews - props

Props	Render as	Type	Optional	Description
url	u	`string`	Yes	url of the page you are sharing. Leave url blank to submit a question for discussion. If there is no url, text will appear at the top of the thread. If there is a url, text is optional.
title	t	`string`	Yes	title of the page you are sharing

LinkedIn - how to use

<LinkedInLink
	url="https://social-links-doc.vercel.app/"
/>

LinkedIn - props

Props	Render as	Type	Optional	Description
url	url	`string`		url of the page you are sharing

Reddit - how to use

<RedditLink
	url="https://social-links-doc.vercel.app/"
	title="Social media share links working with React and Svelte"
/>

Reddit - props

Props	Render as	Type	Optional	Description
url	url	`string`		url of the page you are sharing
title	title	`string`	Yes	title of the page you are sharing

Twitter

Twitter - how to use

<TwitterLink
	title="Social media share links working with React and Svelte"
	url="https://social-links-doc.vercel.app/"
	hashtags={['socialShareLinks', 'socialMedia', 'javascript', 'svelte', 'react']}
	via="Rich_Harris"
	related="Rich_Harris:creator of Svelte, sveltejs:cybernetically enhanced web framework"
	inReplyTo={undefined}
/>

Twitter - props

Props	Render as	Type	Optional	Description
title	title	`string`		title of the page you are sharing.
url	url	`string`	Yes	url of the page you are sharing
hashtags	hashtags	`Array<string>`	Yes	hashtags related to the page you are sharing
via	via	`string`	Yes	twitter account id (without the "@" character)
related	related	`string`	Yes	suggest additional Twitter usernames related to the Tweet as comma-separated values. Twitter may suggest these accounts to follow after the user posts their Tweet. Read more on the official documentation.
inReplyTo	in_reply_to	`string`	Yes	the Tweet ID of a parent Tweet in a conversation, such as the initial Tweet from your site or author account.

Contribute

add an entry to the object in the script /packages/static/src/generateConfig.mjs
add an entry in the /packages/static/src/config folder (I’ll add the svg 😜)
if the new social media has a property which has never been used before, please, also update the defaultValueForDoc object in the same file

Add a framework

It’s still unclear if I will switch to Mitosis to support many framework at once.

In the mean time, you have to:

copy the /packages/react folder
configure the project:

name, version, dependencies in package.json
build in rollup.config.mjs

implement Icon.tsx and Link.tsx
implement the templates used to generate all the components in /templates
if you’ve made it so far, thank you so much, you can add the new framework support in the doc!

social-links