@2londres/shareable-preview

React component for shareable data preview with debug/user modes.

Installation

pnpm add @2londres/shareable-preview
# or
npm install @2londres/shareable-preview

Peer dependencies

• react >= 18.0.0
• react-dom >= 18.0.0

Your project must have Tailwind CSS configured (the component uses Tailwind classes).

Usage

import { ShareablePreview } from "@2londres/shareable-preview";

<ShareablePreview
  data={{ foo: "bar", count: 42 }}
  title="My Preview"
  actions={[
    { label: "Confirm", onClick: () => {} },
    { label: "Delete", onClick: () => {} },
  ]}
/>

Props

| Prop | Type | Description | |------|------|-------------| | data | unknown | Data to preview | | title | string | Preview title | | description | string | Optional description | | actions | ShareablePreviewAction[] | Action buttons | | shareUrl | string | URL to copy when sharing | | labels | Partial<Record<string, string>> | Override default labels (i18n) | | onNotify | (type: 'success' \| 'error', key: string) => void | Callback for notifications (copy, download, etc.) | | eyeDevMode | 'development' \| 'production' | Show/hide debug UI (default: process.env.NODE_ENV) | | mode | 'debug' \| 'user' | Default view mode | | inline | boolean | Render inline without dialog | | ... | | See component props for full API |

Integration with i18n (react-i18next)

import { useTranslation } from "react-i18next";
import { ShareablePreview } from "@2londres/shareable-preview";

const keys = [
  "shareablePreviewCopySuccess",
  "shareablePreviewShareLinkCopied",
  "shareablePreviewClipboardError",
  // ... other keys
];

<ShareablePreview
  data={data}
  labels={Object.fromEntries(keys.map((k) => [k, t(k)]))}
  onNotify={(type, key) => {
    if (type === "success") notifSilence(key);
    else notifSilenceError(key);
  }}
/>