ibrahimcesar / react-quicklink

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

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

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:

• The Network Information API, which is used to check if the user has a slow effective connection type (via navigator.connection.effectiveType) is only available in Chrome 61+ and Opera 57+
• If Fetch API isn't available, XHR will be used instead.

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