Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
revel-react-link-preview
Advanced tools
Readme
A component package which helps you render the preview data of any link
npm install @ashwamegh/react-link-preview
yarn add @ashwamegh/react-link-preview
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
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
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 |
Thanks for taking the time to contribute, please check out the src to understand how things work.
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.
Pull requests are the greatest contributions, so be sure they are focused in scope and do avoid unrelated commits.
git clone https://github.com/<your-username>/react-link-preview
cd react-link-preview
git checkout -b my-new-feature
yarn
git commit -am 'Add some feature'
git push origin my-new-feature
FAQs
A component package which helps you render the preview of any link. Fork of @ashwamegh/react-link-preview
The npm package revel-react-link-preview receives a total of 1 weekly downloads. As such, revel-react-link-preview popularity was classified as not popular.
We found that revel-react-link-preview demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.