Skip to content

winhtaikaung/react-tiny-link

Repository files navigation

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

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

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