{"id":18487103,"url":"https://github.com/ashwamegh/react-link-preview","last_synced_at":"2025-08-20T22:24:06.775Z","repository":{"id":41654124,"uuid":"259105251","full_name":"ashwamegh/react-link-preview","owner":"ashwamegh","description":"A component package which helps you render the preview data of any link","archived":false,"fork":false,"pushed_at":"2024-06-18T21:26:00.000Z","size":1372,"stargazers_count":25,"open_issues_count":4,"forks_count":13,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T01:54:23.827Z","etag":null,"topics":["component-based","hooks","minify","preview","react","renderprops"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ashwamegh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-26T18:35:06.000Z","updated_at":"2024-11-13T08:21:35.000Z","dependencies_parsed_at":"2024-05-30T19:18:36.162Z","dependency_job_id":"bd1e896f-9772-4ac5-bbe7-ad26ee27a0ad","html_url":"https://github.com/ashwamegh/react-link-preview","commit_stats":{"total_commits":22,"total_committers":2,"mean_commits":11.0,"dds":"0.13636363636363635","last_synced_commit":"f42e583f420608a53d2a32a2be7c707855fcf179"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashwamegh%2Freact-link-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashwamegh%2Freact-link-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashwamegh%2Freact-link-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashwamegh%2Freact-link-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ashwamegh","download_url":"https://codeload.github.com/ashwamegh/react-link-preview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248809032,"owners_count":21164895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["component-based","hooks","minify","preview","react","renderprops"],"created_at":"2024-11-06T12:50:13.461Z","updated_at":"2025-04-14T01:54:33.892Z","avatar_url":"https://github.com/ashwamegh.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/ashwamegh"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"left\"\u003e\n  \u003cimg src=\"./assets/link-preview.png\" alt=\"link-preview\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n# React Link Preview\n\n\u003e A component package which helps you render the preview data of any link\n\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)\n[![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ashwamegh/react-link-preview/)\n[![Build Status](https://travis-ci.org/ashwamegh/react-link-preview.svg?branch=master)](https://travis-ci.org/github/ashwamegh/react-link-preview/)\n[![NPM](https://img.shields.io/npm/v/@ashwamegh/react-link-preview.svg)](https://www.npmjs.com/package/@ashwamegh/react-link-preview) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\u003cbr\u003e\n\u003ca href=\"https://www.buymeacoffee.com/ashwamegh\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;\" \u003e\u003c/a\u003e\n\n\u003e **\u003cins\u003eNOTE: This utilizes https://github.com/ashwamegh/link-preview-generator-server server deployed on Azure, a free web server which can run 30 minutes in a day.\u003c/ins\u003e If you want to use it in a PRODUCTION app, I would recommend you to use your own server (You can use the [`Dockerfile`](https://github.com/ashwamegh/link-preview-generator-server/blob/master/Dockerfile) or the [Docker hub image](https://hub.docker.com/repository/docker/ashwamegh/lpdg-server) for deploying [link-preview-generator-server](https://github.com/ashwamegh/link-preview-generator-server)) and provide the custom link of the API for `customDomain` in the Component Props**\n\n## Demo\n\n## Table of Contents\n\n- [Install](#install)\n- [Usage](#usage)\n- [Props](#props)\n- [Contribute](#contribute)\n- [License](#license)\n\n## Install\n\n### NPM\n\n```bash\nnpm install @ashwamegh/react-link-preview\n```\n\n### Yarn\n\n```bash\nyarn add @ashwamegh/react-link-preview\n```\n\n## Usage\n\n### With built in layout\n\n```jsx\nimport React from 'react'\n\nimport LinkPreview from '@ashwamegh/react-link-preview'\n\n// If you're using built in layout, you will need to import this css\nimport '@ashwamegh/react-link-preview/dist/index.css'\n\nfunction Example() {\n  return \u003cLinkPreview url='https://reactjs.org' /\u003e\n}\n\nexport default Example\n```\n\n### With custom layout (using renderProps)\n\nYou can provide your own component to replace the existing one using renderProps.\n\n```jsx\nimport React from 'react'\n\nimport LinkPreview from '@ashwamegh/react-link-preview'\n\nfunction CustomComponent({ loading, preview }) {\n  return loading ? (\n    \u003ch1\u003eLoading...\u003c/h1\u003e\n  ) : (\n    \u003cdiv\u003e\n      \u003cp\u003eDomain: {preview.domain}\u003c/p\u003e\n      \u003cp\u003eTitle: {preview.title}\u003c/p\u003e\n      \u003cp\u003eDescription: {preview.description}\u003c/p\u003e\n      \u003cimg height='100px' width='100px' src={preview.img} alt={preview.title} /\u003e\n    \u003c/div\u003e\n  )\n}\n\nfunction App() {\n  return (\n    \u003cLinkPreview\n      url='https://reactjs.org'\n      customDomain='https://lpdg-server.azurewebsites.net/parse/link'\n      render={CustomComponent}\n    /\u003e\n  )\n}\n\nexport default App\n```\n\n## Props\n\n| Property       | Type       | Default                                            | Description                                                               | Required |\n| -------------- | ---------- | -------------------------------------------------- | ------------------------------------------------------------------------- | -------- |\n| `url`          | `string`   |                                                    | URL to get preview data                                                   | true     |\n| `onClick`      | `function` |                                                    | onClick handler for the card                                              | false    |\n| `customDomain` | `string`   | `https://lpdg-server.azurewebsites.net/parse/link` | Custom Server API link which can parse the metadata of the page           | false    |\n| `render`       | `function` |                                                    | function which can be called with preview data to render custom component | false    |\n| `width`        | `string`   | `90%`                                              | Width of the card preview                                                 | false    |\n| `maxWidth`     | `string`   | `700px`                                            | Max Width of the card preview                                             | false    |\n| `marginTop`    | `string`   | `18px`                                             | Margin top for the card                                                   | false    |\n| `marginBottom` | `string`   | `18px`                                             | Margin bottom for the card                                                | false    |\n| `marginRight`  | `string`   | `auto`                                             | Margin right for the card                                                 | false    |\n| `marginLeft`   | `string`   | `auto`                                             | Margin left for the card                                                  | false    |\n\n## Contribute\n\nThanks for taking the time to contribute, please check out the [src](src) to understand how things work.\n\n### Reporting Issues\n\nFound a problem? Want a new feature? First of all, see if your issue or idea has [already been reported](../../issues).\nIf don't, just open a [new clear and descriptive issue](../../issues/new).\n\n### Submitting pull requests\n\nPull requests are the greatest contributions, so be sure they are focused in scope and do avoid unrelated commits.\n\n- Fork it!\n- Clone your fork: `git clone https://github.com/\u003cyour-username\u003e/react-link-preview`\n- Navigate to the newly cloned directory: `cd react-link-preview`\n- Create a new branch for the new feature: `git checkout -b my-new-feature`\n- Install the tools necessary for development: `yarn`\n- Make your changes.\n- Commit your changes: `git commit -am 'Add some feature'`\n- Push to the branch: `git push origin my-new-feature`\n- Submit a pull request with full remarks documenting your changes\n\n## License\n\n[MIT License](https://opensource.org/licenses/MIT) © [Shashank Shekhar](https://ashwamegh.github.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashwamegh%2Freact-link-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashwamegh%2Freact-link-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashwamegh%2Freact-link-preview/lists"}