React-Tiny-Link

Convert your links into beautiful previews

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

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',
})

Next.JS

For Next.Js you will have to turn off ssr false and use dynamic import. Because react-tiny-link uses styled-components as styling library which uses browser API window to attach scCGSHMRCache and stuffs after build.

import dynamic from "next/dynamic";
const ReactTinyLink = dynamic(
  () => {
    return import("react-tiny-link").then((mod) => mod.ReactTinyLink);
  },
  { ssr: false }
);

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`

Demo App &

CodeSandbox

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Added some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request

Contributors

Thanks goes to these wonderful people (emoji key):

_{Vladimir Moushkov} 💻	_{Serhii Khoma} 💻 🐛	_{Hitesh Kumar} 💻 🐛	_{VadymMoiseyenkoAgiliway} 💻 🐛	_nastikue 🐛	_sndsabin 💻 🐛	_{Aviskar KC} 🐛 💻
_{Alexandre Bernard} 🐛 💻	_Liz 💻 💡