React Link Preview

> A component package which helps you render the preview data of any link

 

Demo

Table of Contents

- Install
- Usage
- Props
- Contribute
- License

Install

$3

``bash
npm install @ashwamegh/react-link-preview
`

$3

`bash
yarn add @ashwamegh/react-link-preview
`

Usage

$3

`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
`

$3

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 |
| 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 to understand how things work.

$3

Found a problem? Want a new feature? First of all, see if your issue or idea has already been reported.
If don't, just open a new clear and descriptive issue.

$3

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 © Shashank Shekhar