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 &

• Demo

• SourceCode

CodeSandbox

Contributing

1. Fork it

2. Create your feature branch (git checkout -b my-new-feature)

3. Commit your changes (git commit -am 'Added some feature')

4. Push to the branch (git push origin my-new-feature)

5. 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 💻 💡

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT