Package Exports

react-tiny-link

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-tiny-link) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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`

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

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

License

MIT