react-link-previewer

Preview links with page meta tags using React component / hook +

Go service

Features

⚡ Client-side and server-side support
🛠️ Hook and component are written in TypeScript
🚀 Fast standalone service (written in Go)

Installation

# yarn
yarn add react-link-previewer
# npm
npm i react-link-previewer
# pnpm
pnpm i react-link-previewer

How the frontend works

The hook makes a request to a service and passes link as a query parameter.

Then we get a link looking like this:

const url = `${host}?link=${link}`

Then the returned data, which we requested from the service, is passed to children. You can use it to preview your link.

Usage

Hook

react-link-previewer provides a hook for fetching link preview and using the returned data in your link.

const { data, error } = useLinkPreview({
  href: 'https://relaychat.app', // link you want to preview
  host: 'https://og-service.herokuapp.com', // optional custom link data fetching endpoint
  fetchOptions: {} // optional fetch paramaters for making the request
})
return <>{data && <span>site title: {data.title}</span>}</>

Component

The library contains a pre-made component with styling and data fetching. Data fetching happens client-side.

import React from 'react'
import { LinkPreview } from 'react-link-previewer'
import 'react-link-previewer/src/style.css'

const Link = props => (
  <LinkPreview
    external={false} // open external resource in the new tab. default: false
    href="https://relaychat.app" // link you want to preview
    host="https://og-service.herokuapp.com" // optional custom link data fetching endpoint
    fetchOptions={} // optional fetch paramaters for making the request
  />
)

The component can be customized by including custom css.

Author

v1rtl