Nouveau Papier Mâché

    let-react-tiny-link
    TypeScript icon, indicating that this package has built-in type declarations

    3.6.3 • Public • Published

    React-Tiny-Link

    Convert your links into beautiful previews

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

    npm version npm GitHub code size in bytes NPM

    All Contributors

    NPM

    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

    Edit React Tiny Link

    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

    Twitter Follow

    Install

    npm i let-react-tiny-link

    DownloadsWeekly Downloads

    2

    Version

    3.6.3

    License

    MIT

    Unpacked Size

    1.58 MB

    Total Files

    70

    Last publish

    Collaborators

    • dtanaka123