React-tiny-link NPM

React-Tiny-Link

Convert your links into beautiful previews

Yet anotherReact link preview component with cards for web without a specific backend.

npm GitHub code size in bytes NPM

CORS enabled?

No. You may need a CORS proxy to use this component. But if you dont have one, we made the component to use https://cors-anywhere.herokuapp.com as default proxy. Thanks to Rob. It saves my time for accessing urls.

Installation

npm install --save react-tiny-link

Usage & Configuration

import { ReactTinyLink } from 'react-tiny-link'
;<ReactTinyLink
  cardSize="small"
  showGraphic={true}
  maxLine={2}
  minLine={1}
  url="https://www.amazon.com/Steve-Madden-Mens-Jagwar-10-5/dp/B016X44MKA/ref=lp_18637582011_1_1?srs=18637582011&ie=UTF8&qid=1550721409&sr=8-1"
/>

Props & methods

PropName	Description	PropType	value	required
url	URL to be display as preview	string		`true`
cardSize	Size of the card	string	default (`small`) `small`,`large`	`false`
maxLine	Maximum number of line to ellipsis	number	2	`false`
minLine	Minimum number of line to ellipsis	number	1	`false`
width	Width of the link preview card	number	default(`100vw`)	`false`
header	Default Header content	string	null	`false`
description	Default description content	string	null	`false`
proxyUrl	Proxy URL to pass that resolve CORS	string	default(`https://cors-anywhere.herokuapp.com`)	`false`
showGraphic	Boolean value to display graphics	boolean	default(`true`)	`false`
autoPlay	Boolean value to play the media if provided url is video	boolean	default(`false`)	`false`
defaultMedia	Default value to provide the media for failure cases	string	N.A	`false`
noCache	Disables cache of link result	boolean	default(`false`)	`false`
onError	Error callback on when the url failed to fetch	onError(`error:Error`)	N.A	`false`
onSuccess	Success callback on when the url was fetched successfully	onSuccess(`data:IResponseData`)	N.A	`false`
onClick	Click event which will allow to add custom implementation `onClick` event if it was not provided the component itself will render as `<a></a>`.	onClick(`e:Event,data:IResponseData`)	default(`null`)	`false`
loadSecureUrl	Load only secure ( `https://` ) resources. If no secure resource was found, then don't render the `<img>` and `<video>` element	boolean	default(`false`)	`false`
requestHeaders	Request headers that will override the fetch headers	Record<string, string>;	default(`false`)	`false`

Hook usage

import { useScrapper } from 'react-tiny-link'

const [result, loading, error] = useScrapper({
  url:
    'https://www.amazon.com/Steve-Madden-Mens-Jagwar-10-5/dp/B016X44MKA/ref=lp_18637582011_1_1?srs=18637582011&ie=UTF8&qid=1550721409&sr=8-1',
})

Params

PropName	Description	PropType	value	required
url	URL to be display as preview	string		`true`
proxyUrl	Proxy URL to pass that resolve CORS	string	default(`https://cors-anywhere.herokuapp.com`)	`false`
defaultMedias	Default value to provide the media for failure cases	string[]	N.A	`false`
defaultValue	Default response to provide for failure cases	IReactTinyLinkData	N.A	`false`
noCache	Disables cache of link result	boolean	default(`false`)	`false`
onError	Error callback on when the url failed to fetch	onError(`error:Error`)	N.A	`false`
onSuccess	Success callback on when the url was fetched successfully	onSuccess(`data:IResponseData`)	N.A	`false`