Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ashwamegh/react-link-preview
A component package which helps you render the preview data of any link
https://github.com/ashwamegh/react-link-preview
component-based hooks minify preview react renderprops
Last synced: 10 days ago
JSON representation
A component package which helps you render the preview data of any link
- Host: GitHub
- URL: https://github.com/ashwamegh/react-link-preview
- Owner: ashwamegh
- License: mit
- Created: 2020-04-26T18:35:06.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-03-29T04:00:25.000Z (9 months ago)
- Last Synced: 2024-05-01T14:34:06.049Z (8 months ago)
- Topics: component-based, hooks, minify, preview, react, renderprops
- Language: JavaScript
- Homepage:
- Size: 1.29 MB
- Stars: 22
- Watchers: 2
- Forks: 14
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Link Preview
> A component package which helps you render the preview data of any link
[](https://opensource.org/licenses/mit-license.php)
[](https://github.com/ashwamegh/react-link-preview/)
[](https://travis-ci.org/github/ashwamegh/react-link-preview/)
[](https://www.npmjs.com/package/@ashwamegh/react-link-preview) [](https://standardjs.com)
> **NOTE: 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. 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**
## Demo
## Table of Contents
- [Install](#install)
- [Usage](#usage)
- [Props](#props)
- [Contribute](#contribute)
- [License](#license)
## Install
### NPM
```bash
npm install @ashwamegh/react-link-preview
```
### Yarn
```bash
yarn add @ashwamegh/react-link-preview
```
## Usage
### With built in layout
```jsx
import React from 'react'
import LinkPreview from '@ashwamegh/react-link-preview'
// If you're using built in layout, you will need to import this css
import '@ashwamegh/react-link-preview/dist/index.css'
function Example() {
return
}
export default Example
```
### With custom layout (using renderProps)
You can provide your own component to replace the existing one using renderProps.
```jsx
import React from 'react'
import LinkPreview from '@ashwamegh/react-link-preview'
function CustomComponent({ loading, preview }) {
return loading ? (
Loading...
) : (
Domain: {preview.domain}
Title: {preview.title}
Description: {preview.description}
)
}
function App() {
return (
)
}
export default App
```
## Props
| Property | Type | Default | Description | Required |
| -------------- | ---------- | -------------------------------------------------- | ------------------------------------------------------------------------- | -------- |
| `url` | `string` | | URL to get preview data | true |
| `onClick` | `function` | | onClick handler for the card | false |
| `customDomain` | `string` | `https://lpdg-server.azurewebsites.net/parse/link` | Custom Server API link which can parse the metadata of the page | false |
| `render` | `function` | | function which can be called with preview data to render custom component | false |
| `width` | `string` | `90%` | Width of the card preview | false |
| `maxWidth` | `string` | `700px` | Max Width of the card preview | false |
| `marginTop` | `string` | `18px` | Margin top for the card | false |
| `marginBottom` | `string` | `18px` | Margin bottom for the card | false |
| `marginRight` | `string` | `auto` | Margin right for the card | false |
| `marginLeft` | `string` | `auto` | Margin left for the card | false |
## Contribute
Thanks for taking the time to contribute, please check out the [src](src) to understand how things work.
### Reporting Issues
Found a problem? Want a new feature? First of all, see if your issue or idea has [already been reported](../../issues).
If don't, just open a [new clear and descriptive issue](../../issues/new).
### Submitting pull requests
Pull requests are the greatest contributions, so be sure they are focused in scope and do avoid unrelated commits.
- Fork it!
- Clone your fork: `git clone https://github.com//react-link-preview`
- Navigate to the newly cloned directory: `cd react-link-preview`
- Create a new branch for the new feature: `git checkout -b my-new-feature`
- Install the tools necessary for development: `yarn`
- Make your changes.
- Commit your changes: `git commit -am 'Add some feature'`
- Push to the branch: `git push origin my-new-feature`
- Submit a pull request with full remarks documenting your changes
## License
[MIT License](https://opensource.org/licenses/MIT) © [Shashank Shekhar](https://ashwamegh.github.io)