@solid-primitives/share v2.0.6
@solid-primitives/share
Primitives for supporting sharing of resources on social media and beyond.
createSocialShare
- A primitive for sharing on social media and beyond.makeWebShare
- Generates a simple non-reactive WebShare primitive for sharing.createWebShare
- Creates a reactive status about web share.
Installation
npm install @solid-primitives/share
# or
yarn add @solid-primitives/share
# or
pnpm add @solid-primitives/share
createSocialShare
How to use it
import { createSocialShare, TWITTER } from "@solid-primitives/share";
const [share, close] = createSocialShare(() => ({
title: "SolidJS.com",
url: "https://www.solidjs.com",
description: "Simple and well-behaved reactivity!",
}));
share(TWITTER);
Definition
function createSocialShare(
options: Accessor<{
network?: Network;
url: string;
title: string;
description: string;
quote?: string;
hashtags?: string;
twitterUser?: string;
media?: string;
tag?: string;
popup?: SharePopupOptions;
}>,
controller: Window = window,
): [share: (network: Network | undefined) => void, close: () => void, isSharing: Accessor<boolean>];
Network List
The following are a list of supported networks that may be imported from the share package.
Network | url | title | description | Extras/Comments |
---|---|---|---|---|
Baidu | :heavy_check_mark: | :heavy_check_mark: | :x: | |
Buffer | :heavy_check_mark: | :heavy_check_mark: | :x: | |
:heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | ||
EverNote | :heavy_check_mark: | :heavy_check_mark: | :x: | |
:heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | hashtags A list of comma-separated hashtags, only the first one will be used.quote Facebook quote. | |
:heavy_check_mark: | :heavy_check_mark: | :x: | ||
HackerNews | :heavy_check_mark: | :heavy_check_mark: | :x: | |
InstaPaper | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | |
Line | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | |
:heavy_check_mark: | :x: | :x: | ||
Messenger | :heavy_check_mark: | :x: | :x: | |
Odnoklassniki | :heavy_check_mark: | :heavy_check_mark: | :x: | |
:heavy_check_mark: | :heavy_check_mark: | :x: | media URL of an image describing the content. | |
:heavy_check_mark: | :heavy_check_mark: | :x: | ||
:heavy_check_mark: | :heavy_check_mark: | :x: | ||
Skype | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | |
SMS | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | |
StumbleUpon | :heavy_check_mark: | :heavy_check_mark: | :x: | |
Telegram | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | |
Tumblr | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | |
:heavy_check_mark: | :heavy_check_mark: | :x: | hashtags A list of comma-separated hashtags.twitter-user Twitter user to mention. | |
Viber | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | |
VK | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | media URL of an image describing the content. |
:heavy_check_mark: | :heavy_check_mark: | :x: | media URL of an image describing the content. | |
:heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | ||
Wordpress | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | media URL of an image describing the content. |
:heavy_check_mark: | :heavy_check_mark: | :x: | ||
Yammer | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
For the networks: Line
, Skype
, SMS
, Telegram
, Viber
, WhatsApp
and Yammer
; the shared content is a string of the form: "$title
$url
$description
"
Note that you can also provide your own custom network by formatting the input string into the share function. The following is a list of properties that will be replaced by the utility:
@u
: URL@t
: Title@d
: Description@q
: Quote@h
: Hashtags@m
: Media@tu
: TwitterUser (Twitter specific)
The following is an example of Twitter's share string:
const twitter: Network = "https://twitter.com/intent/tweet?text=@t&url=@u&hashtags=@h@tu";
Demo
You may view a working example here on Stackblitz.
Acknowledgements
A portion of this primitive was built from https://github.com/nicolasbeauvais/vue-social-sharing/blob/master/src/share-network.js.
makeWebShare
Generates a simple non-reactive WebShare primitive for sharing. Uses the WebShare API.
How to use it
import { makeWebShare } from "@solid-primitives/share";
const share = makeWebShare();
try {
await share({ url: "https://solidjs.com" });
} catch (e) {
console.log(e);
}
createWebShare
Creates a reactive status about web share. Uses the WebShare API.
How to use it
import { createWebShare } from "@solid-primitives/share";
const [data, setData] = createSignal<ShareData>({});
const shareStatus = createWebShare(data);
createEffect(() => {
console.log(shareStatus.status, shareStatus.message);
});
Changelog
See CHANGELOG.md