Nobody Packages More

    This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    react-quicklink
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    No Maintenance Intended

    DEPRECATED

    This is no longer supported, please consider using more modern, up to date and native functions provided by frameworks or new features from React 18+ that are more performant. The use of this library is not recommended for any production project. This repo is archived and will not receive any more updates.

    React Quicklink

    ⚡️ Faster subsequent page-loads by prefetching in-viewport links during idle time for React, port of https://getquick.link

    Quicklink example

    Installation

    Use your favorite package manager:

    yarn add react-quicklink
    npm install react-quicklink -S

    How it works

    Quicklink attempts to make navigations to subsequent pages load faster by making anchors aware of user network capabilities.

    It will:

    • Detect links within the viewport (using Intersection Observer)
    • Wait until the browser is idle (using requestIdleCallback)
    • Check if the user isn't on a slow connection (using navigator.connection.effectiveType) or has data-saver enabled (using navigator.connection.saveData)
    • Prefetch URLs to the links (using or XHR).

    Why

    Specially for Server Side Rendering Apps, with a lot of content, navigation between pages is not as performant as single page applications, this technique makes it possible to fine tune your perceived speed and provide a better experience for your users. As a component you can have control in which links and origins you want to target and not load every link it finds (which is a very expensive task if you have a lot of links in a page) -- which met my expectations and needs, and hopefully yours too. An adaptive loading method for anchors make for a better navigation.

    Prefer a Higher Order Component (HOC)?

    Great, this will be the right choice for you: https://github.com/HOUCe/react-quicklink-component/

    Basic usage

    import React from "react";
    import { render } from "react-dom";
    import { Quicklink } from "react-quicklink";
    
    const App = () => (
      <div>
        <Quicklink 
            to="https://google.com"
            alt="Alt"
            title="Title"
        >Click Here!
        </Quicklink>
      </div>
    );
    
    // But please, do not use "Click Here", the good People of Internet will thank you.
    // https://www.smashingmagazine.com/2012/06/links-should-never-say-click-here/
    
    render(<App />, document.getElementById("root"));

    And that's it.

    Pro Usage

    You asked for props? You got props.

    Examples with and without children.

    const App = () => (
      <div>
        <Quicklink
            to="https://example.com" // String, is the URL to be fetched. Required
            alt="Alt" // String for alternative text for your link. Required! #a11y
            title="Title" // String for title text for your link
            connType: "2g" // String with threshold for slow connection. Could be "slow-2g", "2g", "3g" or"4g". Dafaults to 2g, meaning on "slow-2g", "2g" this component will not do anything besides be the good and old anchor link <a>
            rootMargin: "0px" // String value for rootMargin property for Intersection Observer. Must be in pixels or percentage.
            threshold: [1.0], // Array of floats from 0 to 1.0. Threshold or Intersection Observer. To better understand about this Web API, pelase refer to https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
            content: "My text link that is not Click Here, passed as a prop!", // String for content if you prefer a more concise way to wrote the tag, like I fancy myself. 
            cls: "my-class" // Bring Your Own Styles. Pass a class to Quicklink, style as you wish
        />
    
        <Quicklink
            to="https://example.com" // String, is the URL to be fetched. Required
            alt="Alt" // String for alternative text for your link. Required! #a11y
            // Every other prop is the same
            content="This will be ignored" // If you are using Quicklink with a children, it will display your children and not the string passed this prop. Childrens first!
        >My text link that is not Click Here, passed as children</Quicklink>
      </div>
    );

    Browser support

    The prefetching provided by quicklink can be viewed as a progressive enhancement. Cross-browser support is as follows:

    • Without polyfills: Chrome, Safari ≥ 12.1, Firefox, Edge, Opera, Android Browser, Samsung Internet.
    • With Intersection Observer polyfill ~6KB gzipped/minified: Safari ≤ 12.0, IE11
    • With the above and a Set() and Array.from polyfill: IE9 and IE10. Core.js provides both Set() and Array.from() shims. Projects like es6-shim are an alternative you can consider.

    Certain features have layered support:

    Issues

    Not tested in all OS, browsers etc. Use at your risk, but please, send feedback! Please feel free to open an issue!

    Contributing

    Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

    Thanks

    Quicklink lib from Google
    React Quicklink Component, a HOC for React for the inspiration
    Addy Osmani (addyosmani) for the Adaptive Loading ideas and the great work in a more performant web

    License

    MIT

    Install

    npm i react-quicklink

    DownloadsWeekly Downloads

    121

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    12.4 kB

    Total Files

    7

    Last publish

    Collaborators

    • ibrahimcesar