@oksigenia/share

Lightweight, privacy-first social share buttons.

• Zero dependencies. ~6 KB gzipped including all 10 SVG icons.
• No tracking. No third-party scripts, no cookies, no pings. Just the native share-intent URLs of each network, opened on user click.
• 10 networks: X (Twitter), Bluesky, Threads, Mastodon, WhatsApp, Telegram, LinkedIn, Reddit, Nostr (copy-only), Email. Mastodon is federated, so its button asks for the user's instance once (kept in localStorage, this device only) via a small accessible dialog.
• 8 locales: en, es, it, nl, de, pt, gn (Guaraní), sv.
• Two APIs:
  • Web component <oksigenia-share> with Shadow DOM (drop-in, no CSS to load).
  • Imperative helper mountShare(target, options) for full control.
• A11y: focus-visible outline, role="group", aria-label, aria-live announcement when Nostr copies, respects prefers-reduced-motion.

Originally developed by Oksigenia as the WordPress plugin oksigenia-share, re-packaged as a framework-agnostic web library.

Install

npm i @oksigenia/share
# or pnpm/yarn

Use it as a web component

<script type="module">
  import '@oksigenia/share/web-component';
</script>

<oksigenia-share
  url="https://granjaoga.com/articulos/vori-vori"
  title="Vori vori paraguayo"
  locale="es-PY"
  networks="x wa tg li em"
  x-handle="granjaoga"
></oksigenia-share>

Attributes:

| Attribute | Default | Notes | |---|---|---| | url | location.href | Absolute URL to share. | | title | document.title | Title/text to share. | | locale | navigator.language | Falls back to base (es-PY → es) then to en. | | networks | all 10 | Space- or comma-separated subset, in display order. | | x-handle | – | Without @; produces "title by @handle" on X. | | nostr-hashtag | oksigenia | Appended to the copied Nostr payload. | | no-label | – | Boolean; if present, hides the SHARE text. | | theme | solid | Icon pack: solid, mono, outline or bare. |

CSS is encapsulated in the shadow DOM — no global stylesheet to load.

Icon themes

Pick a visual style with the theme attribute (or the theme option in mountShare). All four use the same inline glyphs — no extra icon files, no external requests — they only change how each network's brand colour is applied:

• solid (default) — brand-coloured chips, white glyph.
• mono — neutral chips, glyph in the page's own text colour; the brand colour fills in on hover/focus.
• outline — transparent chips with a brand-coloured ring and glyph, filled on hover/focus.
• bare — no chip, just the glyphs in the page's text colour.

mono and bare inherit currentColor, so they keep whatever contrast the host page already provides; solid and outline use the brand colours.

Use it imperatively (light DOM)

import { mountShare } from '@oksigenia/share';
import '@oksigenia/share/styles.css'; // load the global styles once

const target = document.querySelector('#share-here')!;
const { destroy } = mountShare(target, {
  title: 'Vori vori paraguayo',
  url: 'https://granjaoga.com/articulos/vori-vori',
  locale: 'es-PY',
  networks: ['x', 'wa', 'tg', 'em'],
  xHandle: 'granjaoga',
});

// later
destroy();

Use it in Astro

---
const { url, title } = Astro.props;
---
<script>
  import '@oksigenia/share/web-component';
</script>
<oksigenia-share url={url} title={title} locale="es-PY"></oksigenia-share>

Low-level building blocks

import { buildShareLink, getTranslation, NETWORKS } from '@oksigenia/share';

const link = buildShareLink({
  network: 'wa',
  title: 'Mi receta',
  url: 'https://example.com',
});

const t = getTranslation('es-PY');
// t.share === 'COMPARTIR'

External services touched

The buttons redirect the user (and only on explicit click) to:

• twitter.com / x.com — Privacy · Terms
• bsky.app — Privacy · Terms
• threads.net — Privacy · Terms
• Mastodon — opens the share composer on the instance the user provides (federated; each instance has its own operator/policies). General info: joinmastodon.org
• whatsapp.com — Privacy · Terms
• telegram.org — Privacy · Terms
• linkedin.com — Privacy · Terms
• reddit.com — Privacy · Terms

Nostr copies a text payload to the clipboard (no network call). Email uses the mailto: scheme (handled by the user agent).

License

MIT © Oksigenia SL.