https://github.com/xiaoping6688/react-quicklink-component
quicklink with react component
https://github.com/xiaoping6688/react-quicklink-component
Last synced: over 1 year ago
JSON representation
quicklink with react component
- Host: GitHub
- URL: https://github.com/xiaoping6688/react-quicklink-component
- Owner: xiaoping6688
- Created: 2019-01-24T16:38:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-29T10:22:00.000Z (over 7 years ago)
- Last Synced: 2025-01-21T14:45:29.453Z (over 1 year ago)
- Language: JavaScript
- Size: 7.69 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-quicklink-component
> React component prefetching in-viewport links during idle time
Inspired by GoogleChromeLabs [quicklink](https://github.com/GoogleChromeLabs/quicklink/blob/master/README.md), implemented with React component
## How it works
`` component attempts to make navigations to subsequent pages load faster. It:
* **Detects links within the viewport** (using [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API))
* **Waits until the browser is idle** (using [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/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 [``](https://www.w3.org/TR/resource-hints/#prefetch) or XHR). Provides some control over the request priority (can switch to `fetch()` if supported).
we connect [quicklink](https://github.com/GoogleChromeLabs/quicklink/blob/master/README.md) source code by `React ref` and design `` component by `render prop` pattern.
## Installation
For use with [node](http://nodejs.org) and [npm](https://npmjs.com):
```sh
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:
``` javascript
...
```
As for Quicklink's options prop, absolutely the same with [quicklink](https://github.com/GoogleChromeLabs/quicklink/blob/master/README.md)
## License
Licensed under the Apache-2.0 license.