@linksense/react

React hooks for URL platform detection, normalization, and extraction. Powered by @linksense/core.

Install

# npm
npm install @linksense/react react

# pnpm
pnpm add @linksense/react react

# yarn
yarn add @linksense/react react

Hooks

useLinkSense(url, options?)

The main hook — detects which platform a URL belongs to.

import { Icon } from "@iconify/react";
import { useLinkSense } from "@linksense/react";

function LinkCard({ url }: { url: string }) {
  const { result, isDetected, platform } = useLinkSense(url);

  if (!isDetected || !result) return <p>Unknown link</p>;

  return (
    <div>
      <span>{result.title}</span>
      <Icon icon={result.icon} />
      <a href={url}>{platform}</a>
    </div>
  );
}

Options:

| Option | Type | Default | Description | |---|---|---|---| | all | boolean | false | Return all matching platforms | | normalize | boolean | false | Include normalized URL data | | extract | boolean | false | Include extracted path/query data |

const { result, results, normalized, extracted } = useLinkSense(url, {
  all: true,
  normalize: true,
  extract: true,
});

Returns UseLinkSenseResult:

| Field | Type | Description | |---|---|---| | result | DetectResult \| null | First matching platform | | results | DetectResult[] | All matching platforms (when all: true) | | isDetected | boolean | Whether any platform matched | | platform | string \| null | Name of the first matched platform | | normalized | NormalizedUrl \| null | Normalized URL (when normalize: true) | | extracted | ExtractedData \| null | Extracted data (when extract: true) |

useDetectAll(url)

Returns all platforms that match a URL.

import { useDetectAll } from "@linksense/react";

function PlatformTags({ url }: { url: string }) {
  const { results, platforms, isDetected } = useDetectAll(url);

  return (
    <ul>
      {results.map((r) => (
        <li key={r.platform}>{r.title}</li>
      ))}
    </ul>
  );
}

useNormalizeUrl(url)

Normalizes a URL — strips www., lowercases hostname, removes trailing slashes.

import { useNormalizeUrl } from "@linksense/react";

function NormalizedDisplay({ url }: { url: string }) {
  const normalized = useNormalizeUrl(url);

  if (!normalized) return null;
  return <code>{normalized.hostname}{normalized.pathname}</code>;
}

useExtractFromUrl(url)

Extracts structured data (username, repository, path, query) from a URL.

import { useExtractFromUrl } from "@linksense/react";

function UserInfo({ url }: { url: string }) {
  const data = useExtractFromUrl(url);

  if (!data) return null;
  return (
    <div>
      <p>User: {data.username}</p>
      {data.repository && <p>Repo: {data.repository}</p>}
    </div>
  );
}

Icons (Iconify)

result.icon (and PlatformEntry.icon) are Iconify ids such as lucide:github or simple-icons:udemy — not Lucide CSS classes. Install @iconify/react and pass the string to <Icon icon={...} />:

npm install @iconify/react

import { Icon } from "@iconify/react";

<Icon icon={result.icon} width={24} height={24} />

For non-React apps, use the Iconify SVG framework: @iconify/iconify.

Direct Core Access

All @linksense/core functions and types are re-exported for convenience:

import {
  detect,
  detectAll,
  detectBatch,
  getPlatforms,
  normalizeUrl,
  extractFromUrl,
  isValidUrl,
} from "@linksense/react";

import type {
  DetectResult,
  NormalizedUrl,
  ExtractedData,
  PlatformEntry,
} from "@linksense/react";

License

MIT