Skip to content

Commit 0ebf733

Browse files
committed
Added README
1 parent f0c9b31 commit 0ebf733

File tree

1 file changed

+100
-0
lines changed

1 file changed

+100
-0
lines changed

README.md

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# React-Prefetcher
2+
3+
![GitHub](https://img.shields.io/github/license/manojVivek/react-prefetcher.svg)
4+
![npm](https://img.shields.io/npm/v/react-prefetcher.svg?color=green)
5+
6+
A react library providing components that help with interaction-based asset pre-fetching.
7+
8+
## Installation
9+
10+
Using npm:
11+
12+
```bash
13+
npm install react-prefetcher
14+
```
15+
16+
Using yarn:
17+
18+
```bash
19+
yarn add react-prefetcher
20+
```
21+
22+
## Usage
23+
24+
### OnRenderPrefetcher
25+
26+
```javascript
27+
import React, {Fragment} from 'react';
28+
import {OnRenderPrefetcher} from 'react-prefetcher';
29+
30+
export default () => (
31+
<Fragement>
32+
<OnRenderPrefetcher link="https://example.com/some-asset-url">
33+
<p>Asset prefetching happens when this `<p />` tag is rendered</p>
34+
</OnRenderPrefetcher>
35+
</Fragment>
36+
);
37+
```
38+
39+
### OnHoverPrefetcher
40+
41+
```javascript
42+
import React, {Fragment} from 'react';
43+
import {OnHoverPrefetcher} from 'react-prefetcher';
44+
45+
export default () => (
46+
<Fragement>
47+
<OnHoverPrefetcher link="https://example.com/some-asset-url">
48+
<p>Asset prefetching happens when the user hovers this `<p />` tag </p>
49+
</OnHoverPrefetcher>
50+
</Fragment>
51+
);
52+
```
53+
54+
### OnClickPrefetcher
55+
56+
```javascript
57+
import React, {Fragment} from 'react';
58+
import {OnClickPrefetcher} from 'react-prefetcher';
59+
60+
export default () => (
61+
<Fragement>
62+
<OnClickPrefetcher link="https://example.com/some-asset-url">
63+
<p>Asset prefetching happens when the user clicks this `<p />` tag </p>
64+
</OnClickPrefetcher>
65+
</Fragment>
66+
);
67+
```
68+
69+
### Prefetcher
70+
71+
Customize prefetching by combining multiple interations.
72+
73+
```javascript
74+
import React, {Fragment} from 'react';
75+
import Prefetcher from 'react-prefetcher';
76+
77+
export default () => (
78+
<Fragement>
79+
<Prefetcher
80+
renderLink="https://example.com/on-render-asset-url"
81+
hoverLink="https://example.com/on-hover-asset-url"
82+
clickLink="https://example.com/on-click-asset-url"
83+
>
84+
<p>
85+
1. Prefetches https://example.com/on-render-asset-url on render of this `<p />` tag.
86+
2. Prefetches https://example.com/on-hover-asset-url when the user hovers this `<p />` tag.
87+
3. Prefetches https://example.com/on-click-asset-url when the user clicks this `<p />` tag.
88+
</p>
89+
</Prefetcher>
90+
</Fragment>
91+
);
92+
```
93+
94+
## Contributing
95+
96+
Pull requests are welcome.
97+
98+
## License
99+
100+
[MIT](https://github.com/manojVivek/react-prefetcher/blob/master/LICENSE)

0 commit comments

Comments
 (0)