Skip to content
quicklink with react component
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.gitignore
README.md
package-lock.json
package.json
webpack.config.js
yarn.lock

README.md

react-quicklink-component

React component prefetching in-viewport links during idle time

Inspired by GoogleChromeLabs quicklink, implemented with React component

How it works

<Quicklink> component attempts to make navigations to subsequent pages load faster. It:

  • Detects links within the viewport (using Intersection Observer)
  • Waits until the browser is idle (using requestIdleCallback)
  • Checks if the user isn't on a slow connection (using navigator.connection.effectiveType) or has data-saver enabled (using navigator.connection.saveData)
  • Prefetches URLs to the links (using <link rel=prefetch> or XHR). Provides some control over the request priority (can switch to fetch() if supported).

we connect quicklink source code by React ref and design <Quicklink> component by render prop pattern.

Installation

For use with node and npm:

npm install --save react-quicklink-component

Usage

Once initialized, Quicklink will automatically prefetch children component's URLs for links that are in-viewport during idle time.

Quickstart:

<Quicklink quicklink={options}>
  <Comp1 />
  ...
  <CompN />
</Quicklink>

As for Quicklink's options prop, absolutely the same with quicklink

License

Licensed under the Apache-2.0 license.

You can’t perform that action at this time.