Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dhaiwat10/react-link-preview
A React library that generates beautiful previews for your links.
https://github.com/dhaiwat10/react-link-preview
Last synced: 14 days ago
JSON representation
A React library that generates beautiful previews for your links.
- Host: GitHub
- URL: https://github.com/dhaiwat10/react-link-preview
- Owner: Dhaiwat10
- License: mit
- Created: 2021-05-22T05:05:01.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-21T02:02:36.000Z (about 1 year ago)
- Last Synced: 2024-10-23T01:40:57.247Z (21 days ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@dhaiwat10/react-link-preview
- Size: 567 KB
- Stars: 182
- Watchers: 4
- Forks: 53
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# React Link Preview
A React component that renders beautiful, fully-customizable link previews.
[](https://badge.fury.io/js/%40dhaiwat10%2Freact-link-preview)
## How to use
**Install the package:**
`yarn add @dhaiwat10/react-link-preview`
`npm install @dhaiwat10/react-link-preview`
**Import and render the preview:**
```js
import { LinkPreview } from '@dhaiwat10/react-link-preview';
const Home = () => {
return ;
};
```
If the component renders nothing, it means that no metadata could be scraped for the URL. Provide a `fallback` component if you don't want to render `null`.
## Important
This package uses a Heroku [proxy (open-source)](https://github.com/dhaiwat10/rlp-proxy) to get around CORS issues. The public proxy receives a lot of traffic (+ there is a rate limit) and is not recommended for production use.
## Recommended workflow (for production)
- Please [fork the proxy repo](https://github.com/dhaiwat10/rlp-proxy) and host your own copy of it.
- You can then use the `customFetcher` prop to pass a fetcher function that fetches data from _your_ proxy. The `LinkPreview` will now use your proxy as the data source. More details below.
## API (Available props)
You can pass the following props to the `LinkPreview` component.
### `url` (string)
The URL for which you want to generate the link preview.
### `customFetcher?` (function)
A function that takes in a `url` & fetches data from a proxy/server. The function should return a Promise that resolves to an object with the following structure:
```js
{
title: string | null;
description: string | null;
image: string | null;
siteName: string | null;
hostname: string | null;
}
```
You can use any data-source as you like as long as the `customFetcher` function returns a Promise that resolves to an object with the above structure.
[Example](src/components/LinkPreview/LinkPreview.stories.tsx#L54)
### `fallback?` (JSX.Element / any valid JSX)
A fallback component which will be rendered if a link preview could not be generated.
### `fallbackImageSrc` (string)
A fallback image src/URL which will be used if there was no image found for the URL.
### `explicitImageSrc` (string)
The src that will be used for the image regardless of what the data source returns.
### `showLoader?` (boolean)
Whether you want to display the default loading skeleton or not.
### `customLoader?` (JSX.Element / any valid JSX)
Custom loader that will be displayed in place of the default loader.
### `backgroundColor?` (string)
Background color of the card.
### `primaryTextColor?` (string)
Color of the primary text (title).
### `secondaryTextColor?` (string)
Color of the secondary text (description, URL, domain name).
### `borderColor?` (string)
Color of the border of the card.
### `className?` (string)
Any custom CSS class that you want to apply to the card.
### `width?` (string or number)
Width of the card.
### `height?` (string or number)
Height of the card.
### `margin?` (string or number)
Margin around the card.
### `descriptionLength?` (number)
Length of the description in the card. (number of characters)
### `borderRadius?` (string or number)
Border radius of the card.
### `imageHeight?` (string or number)
Height of the image.
### `textAlign?` ( _left_, _right_ or _center_)
Alignment of the text.
### `openInNewTab?` (boolean)
Where the link is opened (new tab or current tab).
### `showPlaceholderIfNoImage?` (boolean)
Whether the placeholder image is displayed in case no image could be scraped.
___
Props marked with **?** are **optional**.