react-tiny-link-electron
v3.6.1
Published
> Convert your links into beautiful previews
Downloads
8
Maintainers
Readme
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
|
| 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
|
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):
This project follows the all-contributors specification. Contributions of any kind welcome!