Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Android 自定义相机: 可定制的 UI, 压缩到指定分辨率级别, 裁剪指定区域, 大图预览. (Android custom camera: Customizable UI, compress to specific resolution level, clip specific area programmatically, picture preview, usage of Camera / Camera2 API.)

Stars: ✭ 134 (-30.57%)

Mutual labels: preview

Uicard

Generic UI for card games like Hearthstone, Magic Arena and Slay the Spire...

Stars: ✭ 142 (-26.42%)

Mutual labels: cards

Link Prevue

Vue component for generate a link preview

Stars: ✭ 186 (-3.63%)

Mutual labels: preview

View All Similar Projects ➔

React-Tiny-Link

Convert your links into beautiful previews

Yet anotherReact link preview component with cards for web without a specific backend.

CORS enabled?

No. You may need a CORS proxy to use this component. But if you dont have one, we made the component to use https://cors-anywhere.herokuapp.com as default proxy. Thanks to Rob. It saves my time for accessing urls.

Installation


npm install --save react-tiny-link

Usage & Configuration

import { ReactTinyLink } from 'react-tiny-link'
;<ReactTinyLink
  cardSize="small"
  showGraphic={true}
  maxLine={2}
  minLine={1}
  url="https://www.amazon.com/Steve-Madden-Mens-Jagwar-10-5/dp/B016X44MKA/ref=lp_18637582011_1_1?srs=18637582011&ie=UTF8&qid=1550721409&sr=8-1"
/>

Props & methods

PropName	Description	PropType	value	required
url	URL to be display as preview	string		`true`
cardSize	Size of the card	string	default (`small`) `small`,`large`	`false`
maxLine	Maximum number of line to ellipsis	number	2	`false`
minLine	Minimum number of line to ellipsis	number	1	`false`
width	Width of the link preview card	number	default(`100vw`)	`false`
header	Default Header content	string	null	`false`
description	Default description content	string	null	`false`
proxyUrl	Proxy URL to pass that resolve CORS	string	default(`https://cors-anywhere.herokuapp.com`)	`false`
showGraphic	Boolean value to display graphics	boolean	default(`true`)	`false`
autoPlay	Boolean value to play the media if provided url is video	boolean	default(`false`)	`false`
defaultMedia	Default value to provide the media for failure cases	string	N.A	`false`
noCache	Disables cache of link result	boolean	default(`false`)	`false`
onError	Error callback on when the url failed to fetch	onError(`error:Error`)	N.A	`false`
onSuccess	Success callback on when the url was fetched successfully	onSuccess(`data:IResponseData`)	N.A	`false`
onClick	Click event which will allow to add custom implementation `onClick` event if it was not provided the component itself will render as `<a></a>`.	onClick(`e:Event,data:IResponseData`)	default(`null`)	`false`
loadSecureUrl	Load only secure ( `https://` ) resources. If no secure resource was found, then don't render the `<img>` and `<video>` element	boolean	default(`false`)	`false`
requestHeaders	Request headers that will override the fetch headers	Record<string, string>;	default(`false`)	`false`

Hook usage

import { useScrapper } from 'react-tiny-link'

const [result, loading, error] = useScrapper({
  url:
    'https://www.amazon.com/Steve-Madden-Mens-Jagwar-10-5/dp/B016X44MKA/ref=lp_18637582011_1_1?srs=18637582011&ie=UTF8&qid=1550721409&sr=8-1',
})

Params

PropName	Description	PropType	value	required
url	URL to be display as preview	string		`true`
proxyUrl	Proxy URL to pass that resolve CORS	string	default(`https://cors-anywhere.herokuapp.com`)	`false`
defaultMedias	Default value to provide the media for failure cases	string[]	N.A	`false`
defaultValue	Default response to provide for failure cases	IReactTinyLinkData	N.A	`false`
noCache	Disables cache of link result	boolean	default(`false`)	`false`
onError	Error callback on when the url failed to fetch	onError(`error:Error`)	N.A	`false`
onSuccess	Success callback on when the url was fetched successfully	onSuccess(`data:IResponseData`)	N.A	`false`

Demo App &

CodeSandbox

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Added some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request

Contributors

Thanks goes to these wonderful people (emoji key):

_{Vladimir Moushkov} 💻	_{Serhii Khoma} 💻 🐛	_{Hitesh Kumar} 💻 🐛	_{VadymMoiseyenkoAgiliway} 💻 🐛	_nastikue 🐛	_sndsabin 💻 🐛	_{Aviskar KC} 🐛 💻
_{Alexandre Bernard} 🐛 💻	_Liz 💻 💡

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 193

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (15) 🔗