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.
⚡️ Faster subsequent page-loads by prefetching in-viewport links during idle time for React, port of https://getquick.link
Use your favorite package manager:
yarn add react-quicklink
npm install react-quicklink -S
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).
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/
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.
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>
);
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()
andArray.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.
Not tested in all OS, browsers etc. Use at your risk, but please, send feedback! Please feel free to open an issue!
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
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