React Link Preview
A component package which helps you render the preview data of any link
Demo
Table of Contents
Install
NPM
npm install @ashwamegh/react-link-preview
Yarn
yarn add @ashwamegh/react-link-preview
Usage
With built in layout
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 <LinkPreview url="https://reactjs.org"/>
}
export default Example
With custom layout (using renderProps)
You can provide your own component to replace the existing one using renderProps.
import React from 'react'
import LinkPreview from '@ashwamegh/react-link-preview'
function CustomComponent ({ loading, preview }) {
return loading
? (<h1>Loading...</h1>)
: (
<div>
<p>Domain: { preview.domain }</p>
<p>Title: { preview.title }</p>
<p>Description: { preview.description }</p>
<img height="100px" width="100px" src={preview.img} alt={preview.title} />
</div>
)
}
function App () {
return <LinkPreview url="https://reactjs.org" render={CustomComponent}/>
}
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.
Reporting Issues
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.
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/<your-username>/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