From ea3229a105db40a547c5677f043c21d04c0b0197 Mon Sep 17 00:00:00 2001
From: demianrenzulli <demian77@gmail.com>
Date: Thu, 23 Apr 2020 20:26:14 -0400
Subject: [PATCH] Adding SPA section to README.md

cc // @addyosmani @anton-karlovskiy
---
 README.md | 48 ++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 42 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index ad534cf0..c2b11cfc 100644
--- a/README.md
+++ b/README.md
@@ -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):
 
@@ -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.
 
@@ -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