{"id":13726942,"url":"https://github.com/winhtaikaung/react-tiny-link","last_synced_at":"2026-01-30T11:34:07.134Z","repository":{"id":34440333,"uuid":"170858505","full_name":"winhtaikaung/react-tiny-link","owner":"winhtaikaung","description":"Convert your links into rich previews","archived":false,"fork":false,"pushed_at":"2023-01-07T03:16:18.000Z","size":8014,"stargazers_count":259,"open_issues_count":33,"forks_count":48,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-07T22:35:10.032Z","etag":null,"topics":["cards","link","preview","react"],"latest_commit_sha":null,"homepage":"https://winhtaikaung.github.io/react-tiny-link","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/winhtaikaung.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-15T12:01:36.000Z","updated_at":"2025-05-01T10:07:35.000Z","dependencies_parsed_at":"2023-01-15T07:15:29.381Z","dependency_job_id":null,"html_url":"https://github.com/winhtaikaung/react-tiny-link","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/winhtaikaung/react-tiny-link","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winhtaikaung%2Freact-tiny-link","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winhtaikaung%2Freact-tiny-link/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winhtaikaung%2Freact-tiny-link/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winhtaikaung%2Freact-tiny-link/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/winhtaikaung","download_url":"https://codeload.github.com/winhtaikaung/react-tiny-link/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winhtaikaung%2Freact-tiny-link/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28911821,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T08:15:08.179Z","status":"ssl_error","status_checked_at":"2026-01-30T08:14:31.507Z","response_time":66,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cards","link","preview","react"],"created_at":"2024-08-03T01:03:32.401Z","updated_at":"2026-01-30T11:34:07.118Z","avatar_url":"https://github.com/winhtaikaung.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React-Tiny-Link\n\n\u003e Convert your links into beautiful previews\n\nYet anotherReact link preview component with cards for web without a specific backend.\n\n[![npm version](https://badge.fury.io/js/react-tiny-link.svg)](https://badge.fury.io/js/react-tiny-link) ![npm](https://img.shields.io/npm/v/react-tiny-link.svg) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/winhtaikaung/react-tiny-link.svg) ![NPM](https://img.shields.io/npm/l/react-tiny-link.svg)\n\n[![All Contributors](https://img.shields.io/github/contributors/winhtaikaung/react-tiny-link?style=flat-square\u0026color=orange\u0026label=all%20contributors)](#contributors)\n\n[![NPM](https://nodei.co/npm/react-tiny-link.png)](https://nodei.co/npm/react-tiny-link/)\n\n## CORS enabled?\n\nNo. 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](https://github.com/Rob--W). [It](https://cors-anywhere.herokuapp.com) saves my time for accessing urls.\n\n## Installation\n\n```\n\nnpm install --save react-tiny-link\n\n```\n\n## Usage \u0026 Configuration\n\n```javascript\nimport { ReactTinyLink } from 'react-tiny-link'\n;\u003cReactTinyLink\n  cardSize=\"small\"\n  showGraphic={true}\n  maxLine={2}\n  minLine={1}\n  url=\"https://www.amazon.com/Steve-Madden-Mens-Jagwar-10-5/dp/B016X44MKA/ref=lp_18637582011_1_1?srs=18637582011\u0026ie=UTF8\u0026qid=1550721409\u0026sr=8-1\"\n/\u003e\n```\n\n## Props \u0026 methods\n\n| PropName           | Description                                                                                                                                     | PropType                              | value                                          | required |\n| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ---------------------------------------------- | -------- |\n| **url**            | URL to be display as preview                                                                                                                    | string                                |                                                | `true`   |\n| **cardSize**       | Size of the card                                                                                                                                | string                                | default (`small`) `small`,`large`              | `false`  |\n| **maxLine**        | Maximum number of line to ellipsis                                                                                                              | number                                | 2                                              | `false`  |\n| **minLine**        | Minimum number of line to ellipsis                                                                                                              | number                                | 1                                              | `false`  |\n| **width**          | Width of the link preview card                                                                                                                  | number                                | default(`100vw`)                               | `false`  |\n| **header**         | Default Header content                                                                                                                          | string                                | null                                           | `false`  |\n| **description**    | Default description content                                                                                                                     | string                                | null                                           | `false`  |\n| **proxyUrl**       | Proxy URL to pass that resolve CORS                                                                                                             | string                                | default(`https://cors-anywhere.herokuapp.com`) | `false`  |\n| **showGraphic**    | Boolean value to display graphics                                                                                                               | boolean                               | default(`true`)                                | `false`  |\n| **autoPlay**       | Boolean value to play the media if provided url is video                                                                                        | boolean                               | default(`false`)                               | `false`  |\n| **defaultMedia**   | Default value to provide the media for failure cases                                                                                            | string                                | N.A                                            | `false`  |\n| **noCache**        | Disables cache of link result                                                                                                                   | boolean                               | default(`false`)                               | `false`  |\n| **onError**        | Error callback on when the url failed to fetch                                                                                                  | onError(`error:Error`)                | N.A                                            | `false`  |\n| **onSuccess**      | Success callback on when the url was fetched successfully                                                                                       | onSuccess(`data:IResponseData`)       | N.A                                            | `false`  |\n| **onClick**        | Click event which will allow to add custom implementation `onClick` event if it was not provided the component itself will render as `\u003ca\u003e\u003c/a\u003e`. | onClick(`e:Event,data:IResponseData`) | default(`null`)                                | `false`  |\n| **loadSecureUrl**  | Load only secure ( `https://` ) resources. If no secure resource was found, then don't render the `\u003cimg\u003e` and `\u003cvideo\u003e` element                 | boolean                               | default(`false`)                               | `false`  |\n| **requestHeaders** | Request headers that will override the fetch headers                                                                                            | Record\u003cstring, string\u003e;               | default(`false`)                               | `false`  |\n\n## Hook usage\n\n```javascript\nimport { useScrapper } from 'react-tiny-link'\n\nconst [result, loading, error] = useScrapper({\n  url:\n    'https://www.amazon.com/Steve-Madden-Mens-Jagwar-10-5/dp/B016X44MKA/ref=lp_18637582011_1_1?srs=18637582011\u0026ie=UTF8\u0026qid=1550721409\u0026sr=8-1',\n})\n```\n\n## Next.JS\nFor Next.Js you will have to turn off `ssr` false and use dynamic import.\n Because `react-tiny-link` uses `styled-components` as styling library which uses browser API `window` to attach `scCGSHMRCache` and stuffs after build.\n\n```javascript\nimport dynamic from \"next/dynamic\";\nconst ReactTinyLink = dynamic(\n  () =\u003e {\n    return import(\"react-tiny-link\").then((mod) =\u003e mod.ReactTinyLink);\n  },\n  { ssr: false }\n);\n\n```\n\n## Params\n\n| PropName          | Description                                               | PropType                        | value                                          | required |\n| ----------------- | --------------------------------------------------------- | ------------------------------- | ---------------------------------------------- | -------- |\n| **url**           | URL to be display as preview                              | string                          |                                                | `true`   |\n| **proxyUrl**      | Proxy URL to pass that resolve CORS                       | string                          | default(`https://cors-anywhere.herokuapp.com`) | `false`  |\n| **defaultMedias** | Default value to provide the media for failure cases      | string[]                        | N.A                                            | `false`  |\n| **defaultValue**  | Default response to provide for failure cases             | IReactTinyLinkData              | N.A                                            | `false`  |\n| **noCache**       | Disables cache of link result                             | boolean                         | default(`false`)                               | `false`  |\n| **onError**       | Error callback on when the url failed to fetch            | onError(`error:Error`)          | N.A                                            | `false`  |\n| **onSuccess**     | Success callback on when the url was fetched successfully | onSuccess(`data:IResponseData`) | N.A                                            | `false`  |\n\n## Demo App \u0026\n\n- [Demo](https://winhtaikaung.github.io/react-tiny-link/)\n\n- [SourceCode](https://github.com/winhtaikaung/react-tiny-link/)\n\n## CodeSandbox\n\n[![Edit React Tiny Link](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/monp6n08n8?fontsize=14)\n\n## Contributing\n\n1. Fork it\n\n2. Create your feature branch (`git checkout -b my-new-feature`)\n\n3. Commit your changes (`git commit -am 'Added some feature'`)\n\n4. Push to the branch (`git push origin my-new-feature`)\n\n5. Create new Pull Request\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/vladimirmoushkov\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/21225376?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVladimir Moushkov\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/winhtaikaung/react-tiny-link/commits?author=vladimirmoushkov\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://bitbucket.org/srghma\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/7573215?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSerhii Khoma\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/winhtaikaung/react-tiny-link/commits?author=srghma\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/winhtaikaung/react-tiny-link/issues?q=author%3Asrghma\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://hitesh399.github.io/\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/15153925?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHitesh Kumar\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/winhtaikaung/react-tiny-link/commits?author=hitesh399\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/winhtaikaung/react-tiny-link/issues?q=author%3Ahitesh399\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/VadymMoiseyenkoAgiliway\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/45002342?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVadymMoiseyenkoAgiliway\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/winhtaikaung/react-tiny-link/commits?author=VadymMoiseyenkoAgiliway\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/winhtaikaung/react-tiny-link/issues?q=author%3AVadymMoiseyenkoAgiliway\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/nastikue\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/13137535?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003enastikue\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/winhtaikaung/react-tiny-link/issues?q=author%3Anastikue\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/sndsabin\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/9588306?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003esndsabin\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/winhtaikaung/react-tiny-link/commits?author=sndsabin\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/winhtaikaung/react-tiny-link/issues?q=author%3Asndsabin\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/aviskarkc10\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/13309631?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAviskar KC\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/winhtaikaung/react-tiny-link/issues?q=author%3Aaviskarkc10\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/winhtaikaung/react-tiny-link/commits?author=aviskarkc10\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://ekee.io\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/17802364?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlexandre Bernard\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/winhtaikaung/react-tiny-link/issues?q=author%3ADot-H\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/winhtaikaung/react-tiny-link/commits?author=Dot-H\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/lizlam\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/661514?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLiz\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/winhtaikaung/react-tiny-link/commits?author=lizlam\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#example-lizlam\" title=\"Examples\"\u003e💡\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[MIT](http://www.opensource.org/licenses/MIT)\n\n![Twitter Follow](https://img.shields.io/twitter/follow/winhtaikaung.svg?style=social)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinhtaikaung%2Freact-tiny-link","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwinhtaikaung%2Freact-tiny-link","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinhtaikaung%2Freact-tiny-link/lists"}