Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/winhtaikaung/react-tiny-link
Convert your links into rich previews
https://github.com/winhtaikaung/react-tiny-link
cards link preview react
Last synced: 29 days ago
JSON representation
Convert your links into rich previews
- Host: GitHub
- URL: https://github.com/winhtaikaung/react-tiny-link
- Owner: winhtaikaung
- Created: 2019-02-15T12:01:36.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T03:16:18.000Z (almost 2 years ago)
- Last Synced: 2024-08-03T01:29:58.360Z (4 months ago)
- Topics: cards, link, preview, react
- Language: TypeScript
- Homepage: https://winhtaikaung.github.io/react-tiny-link
- Size: 7.64 MB
- Stars: 257
- Watchers: 5
- Forks: 48
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-list - react-tiny-link
- project-awesome - winhtaikaung/react-tiny-link - Convert your links into rich previews (TypeScript)
README
# React-Tiny-Link
> Convert your links into beautiful previews
Yet anotherReact link preview component with cards for web without a specific backend.
[](https://badge.fury.io/js/react-tiny-link)   
[](#contributors)
[](https://nodei.co/npm/react-tiny-link/)
## 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](https://github.com/Rob--W). [It](https://cors-anywhere.herokuapp.com) saves my time for accessing urls.
## Installation
```
npm install --save react-tiny-link
```
## Usage & Configuration
```javascript
import { ReactTinyLink } from 'react-tiny-link'
;
```
## 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 ``. | 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 `![]()
` and `` element | boolean | default(`false`) | `false` |
| **requestHeaders** | Request headers that will override the fetch headers | Record; | default(`false`) | `false` |
## Hook usage
```javascript
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',
})
```
## Next.JS
For Next.Js you will have to turn off `ssr` false and use dynamic import.
Because `react-tiny-link` uses `styled-components` as styling library which uses browser API `window` to attach `scCGSHMRCache` and stuffs after build.
```javascript
import dynamic from "next/dynamic";
const ReactTinyLink = dynamic(
() => {
return import("react-tiny-link").then((mod) => mod.ReactTinyLink);
},
{ ssr: false }
);
```
## 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 &
- [Demo](https://winhtaikaung.github.io/react-tiny-link/)
- [SourceCode](https://github.com/winhtaikaung/react-tiny-link/)
## CodeSandbox
[](https://codesandbox.io/s/monp6n08n8?fontsize=14)
## Contributing
1. Fork it
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Added some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create new Pull Request
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Vladimir Moushkov
💻
Serhii Khoma
💻 🐛
Hitesh Kumar
💻 🐛
VadymMoiseyenkoAgiliway
💻 🐛
nastikue
🐛
sndsabin
💻 🐛
Aviskar KC
🐛 💻
Alexandre Bernard
🐛 💻
Liz
💻 💡
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## License
[MIT](http://www.opensource.org/licenses/MIT)
