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

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

License

MIT License © Shashank Shekhar