Skip to content

Commit

Permalink
Adding SPA section to README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
demianrenzulli authored Apr 24, 2020
1 parent 9cdf06f commit ea3229a
Showing 1 changed file with 42 additions and 6 deletions.
48 changes: 42 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ Quicklink attempts to make navigations to subsequent pages load faster. It:

This project aims to be a drop-in solution for sites to prefetch links based on what is in the user's viewport. It also aims to be small (**< 1KB minified/gzipped**).

## Installation
## Multi page apps

### Installation

For use with [node](https://nodejs.org) and [npm](https://npmjs.com):

Expand All @@ -33,7 +35,7 @@ npm install --save quicklink

You can also grab `quicklink` from [unpkg.com/quicklink](https://unpkg.com/quicklink).

## Usage
### Usage

Once initialized, `quicklink` will automatically prefetch URLs for links that are in-viewport during idle time.

Expand Down Expand Up @@ -64,11 +66,45 @@ ES Module import:
import { listen, prefetch } from "quicklink";
```

The above options are best for multi-page sites. Single-page apps have a few options available for using quicklink with a router:
## Single page apps (React)

### Installation

First, install the packages with [node](https://nodejs.org) and [npm](https://npmjs.com):

```sh
npm install quicklink webpack-route-manifest --save-dev
```

Then, configure Webpack route manifest into your project, as explained [here](/~https://github.com/lukeed/webpack-route-manifest).
This will generate a map of routes and chunks called `rmanifest.json`. It can be obtained at:

* URL: `site_url/rmanifest.json`
* Window object: `window.__rmanifest`

### Usage

Import `quicklink` React HOC where want to add prefetching functionality.
Wrap your routes with the `withQuicklink()` HOC.

Example:

```sh
import { withQuicklink } from 'quicklink/dist/react/hoc.js';

const options = {
origins: []
};

<Suspense fallback={<div>Loading...</div>}>
<Route path="/" exact component={withQuicklink(Home, options)} />
<Route path="/blog" exact component={withQuicklink(Blog, options)} />
<Route path="/blog/:title" component={withQuicklink(Article, options)} />
<Route path="/about" exact component={withQuicklink(About, options)} />
</Suspense>
```
* Call `quicklink.listen()` once a navigation to a new route has completed
* Call `quicklink.listen()` against a specific DOM element / component
* Call `quicklink.prefetch()` with a custom set of URLs to prefetch
## API
Expand Down

0 comments on commit ea3229a

Please sign in to comment.