react-tiny-link
TypeScript icon, indicating that this package has built-in type declarations

3.6.1 • Public • Published

React-Tiny-Link

Convert your links into beautiful previews

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

npm version npm GitHub code size in bytes NPM

All Contributors

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

Edit React Tiny Link

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

Twitter Follow

Package Sidebar

Install

npm i react-tiny-link

Weekly Downloads

3,999

Version

3.6.1

License

MIT

Unpacked Size

430 kB

Total Files

62

Last publish

Collaborators

  • waung