@dhaiwat10/react-link-preview

React Link Preview

A React component that renders beautiful link previews.

Demo

Note: This package is stil in its early days. Functionality might not be as expected.

How to use

Install the package: yarn add @dhaiwat10/react-link-preview

npm install @dhaiwat10/react-link-preview

Import and render the preview:

import { LinkPreview } from '@dhaiwat10/react-link-preview';

const Home = () => {
  return <LinkPreview url='https://www.youtube.com/watch?v=dQw4w9WgXcQ' />;
};

If the component renders nothing, it means that no metadata could be scraped for the URL.

API (Available props)

You can pass the following props to the LinkPreview component.

url: string

fallback?: JSX.Element (Any valid JSX)

showLoader?: boolean

customLoader?: JSX.Element (Any valid JSX)

backgroundColor?: string

primaryTextColor?: string

secondaryTextColor?: string

borderColor?: string

className?: string

width?: string or number

height?: string or number

margin?: string or number

descriptionLength?: number

borderRadius?: string or number

imageHeight?: string or number

textAlign?: left, right or center

Props marked with ? are optional.

Changelog

1.6.0 (2021-05-28)

Features

• add loader customization (f8d87e3)