https://github.com/haydenbleasel/react-glimpse
Fast, unstyled link preview React component.
https://github.com/haydenbleasel/react-glimpse
link preview react tooltip
Last synced: about 1 year ago
JSON representation
Fast, unstyled link preview React component.
- Host: GitHub
- URL: https://github.com/haydenbleasel/react-glimpse
- Owner: haydenbleasel
- Created: 2022-09-25T15:59:42.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-12T04:46:02.000Z (almost 2 years ago)
- Last Synced: 2025-01-02T14:08:30.038Z (over 1 year ago)
- Topics: link, preview, react, tooltip
- Language: TypeScript
- Homepage:
- Size: 760 KB
- Stars: 57
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Glimpse
Glimpse is a fast, unstyled link preview React component. It uses a combination of server-side and client-side rendering to provide an interactive preview of a link. The server-side component fetches the link's metadata while the client-side component creates a local cache and renders the preview.
## Installation
```bash
yarn add react-glimpse
```
## Usage
### Server
Here's an example of the server code using Next.js' [Edge API Routes](https://nextjs.org/docs/api-routes/edge-api-routes):
```ts
import type { NextRequest } from 'next/server';
import glimpse from 'react-glimpse/server';
const headers = {
'content-type': 'application/json',
};
export const config = {
runtime: 'experimental-edge',
};
const handler = async (req: NextRequest): Promise => {
const { url } = (await req.json()) as { url?: string };
if (!url) {
return new Response(JSON.stringify({}), { status: 400, headers });
}
try {
const data = await glimpse(url);
return new Response(JSON.stringify(data), { status: 200, headers });
} catch () {
return new Response(JSON.stringify({}), { status: 500, headers });
}
};
export default handler;
```
### Client
Here's an example of the client code using Next.js' Link component:
```tsx
'use client';
import type { FC } from 'react';
import { Glimpse, useGlimpse } from 'react-glimpse/client';
import { ArrowUpRight } from 'lucide-react';
import Image from 'next/image';
const fetcher = async (url: string) => {
const response = await fetch('/api/glimpse', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
url,
}),
});
return response.json();
};
const LinkPreview: FC = () => {
const data = useGlimpse(fetcher);
if (!data?.image) {
return null;
}
return (
{data.title}
{data.description}
{data.url}
);
};
export default LinkPreview;
```
Then you can just import the `LinkPreview` component into your higher-level component with:
```tsx
```
## Styling
Glimpse is unstyled by default. You can style it using the `className` prop on the `Glimpse` component.