React-Tiny-Link

Convert your links into beautiful previews

This is a fork of winhtaikaung/react-tiny-link with cache support waiting for PR #88 to be merged

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):

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

License

MIT