@ashwamegh/react-link-preview NPM

React Link Preview

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

Demo

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