Convert your links into beautiful previews
Yet anotherReact link preview component with cards for web without a specific backend.
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.
npm install --save react-tiny-link 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" />| 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 |
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', })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 } );| 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 |
-
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
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!
