winhtaikaung / react-tiny-link

Convert your links into rich previews

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',
})

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.

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

• SourceCode

CodeSandbox

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):

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

react-tiny-link's Issues

feature request: optionally cache requests

Hi, first of all thank you for this awesome and interesting work.
It would be usefull to introduce a cache system in order to save the response of a request, instead of performing again the request.

Proxy doesn't work in production

The proxy doesn't work after npm run build but does work when running npm run start - we've tried setting it explicitly

return <ReactTinyLink
  cardSize="small"
  showGraphic={ true }
  maxLine={ 2 }
  minLine={ 1 }
  url={ link }
  proxyUrl="https://cors-anywhere.herokuapp.com"
/>

As well as leaving it as the default, and it doesn't work in either configuration.

Cheers for the help

react-tiny-link not supporting in IE Edge

This is Good library. This library support in IE Edge? because the content not getting loaded in IE Edge.

I sometimes don't get metadata.

sometimes everything is shown but sometime there is nothing https://media.discordapp.net/attachments/611152291189489695/611197210968981514/unknown.png?width=704&height=439

EBADPLATFORM - Not able to install react-tiny-link in windows

Issue occur while 'npm install save react-tiny-link' and gives me below error .
unsupported platform for [email protected]: wanted {os:win32,arch:x86} (current: {os:win32,arch:ia32}

feature request: provide a custom hook for grabbing link meta data

• Issue type: feature request

• Description:
  Hi, i was just looking at the source and i thought it would be pretty neat if we have some sort of custom hook for just fetching the URL meta data.
  I noticed you have a useMountFetch hook and i think it will just work fine.
  Renaming & exporting it to something like useScrapper or useScrapeData would be sufficient i think.

• Use cases
  Users will have more flexibility and can style the data or use their own custom components.
  If we leverage treeshaking then we don't have to bundle the react-tiny-link specific components.
  It will also solve issues for example if a project does not have styled-component then their project won't have it. and users would create their own custom components with the useScrapper hook
  might also solve #35 in some regards.

Unhandled Rejection (Error): [object Object]

I am working on something that is like a grid board ( Pinterest ) .... and when the react-tiny-link component is used in a grid item sub component that is rendered.. and then the parent component is changed ( aka changing to a different board / gird list ) and the Url's have not completed... I see Uncaught (in promise) [ object ] in the console and react throws up a Unhandled Rejection (Error): [object Object] page...

So I am looking for some guidance on how to use the component in a context like I described ?

Uncaught (in promise) {isCanceled: true}

Hi guys,
I am receiving Uncaught (in promise) errors when we send simultaneous inputs to the component.
Is it possible if you can handle these errors?

add 'providor' to 'result' object of useScrapper

Currently, the result object contains: content, description, image, title, url, video

To have the same datas as in the main ReactTinyLink example, the provider (amazon.com in the readme example) should be added to the result object.

Too Many Requests

How to solve this one? We may need a cancellationToken if it has the same request.

when putting an url without http:// it crashes

hello, I'm using this library the latest version and when I tried to put a link without HTTP:// it crashed with error: TypeError Failed to construct 'URL': Invalid URL
i also tried on the sandbox and it's with the same error

anyone had this issue?

customize font size

Great library! Is it possible to customize font and font size? Thanks!

Preview not displayed (CORS 403 Forbidden issue)

If using the default proxy, after a while the preview stopped showing and I can see that the calls are getting 403 error. This seems to be the issue in other projects using react-tiny-link

Is the default proxy only intended for dev use? Should I be setting up a proxy server? Any tips around the different ways to resolve this will be appreciated.

Nextjs support: ReferenceError: window is not defined

I am getting this when using nextjs, in general, seems like SSR is not working so far.

Is there a limit to the number of times a link preview can be used in our app a given day

is it the proxy URL from herokuapp that limits it?
All of a sudden today my app showing the preview for a link. i had to reinstall the plugin.
Want to know how I can use this seamlessly. thanks a lot.

Image is not supported

Styling not supported

Sadly I can't alter the design to fit on my personal project.

window is not defined

Page breaks when I set url

Hi. Thank you for amazing library.

I use react-tiny-link for view links in comments. First I take a string and match it with regExp, pick up all the links and then use the map method to display all the links. As soon as the first link is transmitted, the entire application crashes. And I get this error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of Comment.

I am absolutely sure that I send the string. Can you help me?

How to add onClick on the component??

How to add onClick on the component??
I want to achieve view count on the same.

Hello from microlink

Hello, sir

We noted you did a copy of our library, Microlink SDK.

Nothing bad there, but after analyzing the code, I noted that the only difference here is, while Microlink SDK uses Microlink API for getting the data, you are using a set of rules over popular sites.

Well, actually you can do that using setData:

import Microlink from '@microlink/react'

export default () => (
  <Microlink
    url='https://www.instagram.com/p/Bt6EMQhHHIr/'
    setData={data => ({ 
     /* your data interface here! */
    }})
  />

Doing that, you don't need to rewrite all the library; just create a Higher Order Component over Microlink SDK.

Also, I'm very open to collaborate and join efforts 🙂

gatsby support

I can't embed this component in my gatsby app
I just import this component and rendered it

accessibility issue with multiple header and footer using deque extension

Im working on accessibility on my react application and I'm using react tiny link at two places, Im using this extension for accessibility checks .
This extension raising issue that Contentinfo landmark should not be contained in another landmark because now there are two header one is mine and one is created by React tiny link
is there any solution for this

Image Fallback when preview image is not available

Is it possible to set a fallback preview image if image is not available instead of showing a blank image

Some demo examples not working

Hello and thanks for this module!

Looking at the demo, it seems like the Amazon and mp3 example aren't working and i'm also getting the same issue when i used it. Any idea what's wrong?

thanks

GET https://cors-anywhere.herokuapp.com/https://www.google.com/ [HTTP/1.1 403 Forbidden 1270ms]

I am trying out a sample link in my app which is https://www.google.com/
the package works fine showing the card thumbnail but the showGraphic={true} is not showing any image
but instead giving me this error on the console

    <ReactTinyLink
      cardSize="small"
      showGraphic={true}
      maxLine={2}
      minLine={1}
      url='https://www.google.com/'
    />

how to show the image?

Typescript definitions planned for release any soon?

Thank you!

AutoPlay not Working

<ReactTinyLink
                              cardSize="small"
                              showGraphic={true}
                              maxLine={2}
                              minLine={1}
                              autoPlay={true}
                              url="youtube url"
                            />

Preview of a Twitter page doesn't show correctly

Thanks for your awesome work of building this package. Here is an issue about Twitter.

Description

Preview the link https://twitter.com/linuxfoundation/status/1257347380728512513 in the demo page, but no image and title are rendered.

Analysis

In the demo, the fetched html via https://cors-anywhere.herokuapp.com/https://twitter.com/linuxfoundation/status/1257347380728512513 xhr, doesn't contain the title and image meta info. A site level html template will be returned.

If we visit twitter via either the original url https://twitter.com/linuxfoundation/status/1257347380728512513 in a separate browser tab or via curl, or we access https://cors-anywhere.herokuapp.com/https://twitter.com/linuxfoundation/status/1257347380728512513 via curl in command line and set user-agent to empty, we'll retrieve the html page with the both title and image meta.

Question

Have you tested Twitter links before? What's the recommended solution to resolve this issue?

Warning: Received `false` for a non-boolean attribute `loading`.

Console warning appears in the project when adding ReactTinyLink:

Use case: create clean react project (npx create-react-app my-app), insert in App.js:

Show only the image without descriptions

Hey.... nice work....first of all congratulations.....

I write because i have an array of links and need to show in a list but only the image... is tthis posible with your library??

waiting a fast response.

Memory leak when component unmount before fetch done

Hi 👋

Problem

The fetchURL function sets the loading and result states in an asynchronous callback. If the component has been unmounted in the meantime, this results to a memory leak.

Reproduction

Just put the ReactTinyLink component in a modal, close the modal before the fetch is done "et voilà" 🚰

Possible fix

You could use a cleanup function in your useEffectAsync which cancels the fetch and sets a variable which prevents the fetchURL to set the state.

Image does not appear for the youtube link, It is happening randomly,

I created a demo link, Here I am displaying the card like toggle. but Sometime image is being display but sometime not. You can have look in below-mentioned url:
https://codesandbox.io/s/modest-dubinsky-ud36i

Ability to remove title, description and just show media

Can we get the ability to remove title, description and just show media?

TypeError: Failed to construct 'URL': Invalid URL

We are trying to render link previews from user input data which means that text which looks like URLs may end up being invalid.
Can this be made more fault tolerant?

Stack below:
t.getHostname
src/utils.ts:20
17 |
18 | export const getHostname = href => {
19 | const { hostname } = new URL(href);

20 | return hostname.replace(REGEX_STRIP_WWW, '');
21 | };
22 |
23 | export const isLarge = cardSize => cardSize === 'large';
View compiled
t.ReactTinyLink
src/ReactTinyLink.tsx:55
52 |
53 |
54 |

55 |
| ^ 56 | {getHostname(url)}
57 |
58 |
View compiled

Invalid URL exception handling

after read #72

I want to handle the invalid url exception using onError and defaultMedia Props. but can't

Check the this link
https://codesandbox.io/s/react-tiny-link-forked-y7mlo

thanks 😊

fixRelativeUrls returns broken link for some images

• fixRelativeUrls doesn't work as expected

  fixRelativeUrls doesn't work as expected for the absolute path for some url https://example.com/test (in either case if provided by user or if present in <base>) :

  <img class="svg" src="/images/example-logo.svg" alt="example-alt-text"/>

  Expected:
  https://example.com/images/example-logo.svg

  Returns:
  https://example.com/test/images/example-logo.svg

  react-tiny-link/src/rules/utils.ts

  Line 75 in 93c25de

  export const fixRelativeUrls = (baseUrl: string, itemUrl: string) => {

• baseUrl defaults to user provided url if <base> is not present in DOM

  Proposal: Instead default to origin of the user provided url.
  

  react-tiny-link/src/rules/Default/ScrapDefault.ts

  Line 6 in 93c25de

  if (!baseUrl) {

Bundle size & duplicate react-dom.production

Hi, thank you for the amazing lib. it works super nicely.

but i only have one issue with it, is that the bundle size is too large.. i don't know if something is wrong or i'm doing something wrong the size is around 190kb and it also includes react-dom.production for some reason.

Changing URL Prop does not cause the component to update

The first time I pass in a URL the component works great and looks amazing. However when I go to change the prop to a different URL the component remains the same and does not update.