https://github.com/manojvivek/react-prefetcher
A react library providing components that help with interaction-based asset pre-fetching. Demo -
https://github.com/manojvivek/react-prefetcher
javascript prefetch prefetch-resources preload react react-component speed web-performance
Last synced: about 1 month ago
JSON representation
A react library providing components that help with interaction-based asset pre-fetching. Demo -
- Host: GitHub
- URL: https://github.com/manojvivek/react-prefetcher
- Owner: manojVivek
- License: mit
- Created: 2019-06-09T10:55:16.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T04:58:14.000Z (over 2 years ago)
- Last Synced: 2025-03-29T04:43:19.142Z (about 2 months ago)
- Topics: javascript, prefetch, prefetch-resources, preload, react, react-component, speed, web-performance
- Language: JavaScript
- Homepage: https://manojvivek.github.io/react-prefetcher/
- Size: 1.46 MB
- Stars: 15
- Watchers: 1
- Forks: 2
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-Prefetcher  
A react library providing components that help with interaction-based asset pre-fetching.
## Installation
Using npm:
```bash
npm install react-prefetcher
```
Using yarn:
```bash
yarn add react-prefetcher
```
## Usage
### OnRenderPrefetcher
```javascript
import React, {Fragment} from 'react';
import {OnRenderPrefetcher} from 'react-prefetcher';
export default () => (
Asset prefetching happens when this `
` tag is rendered
);
```
### OnHoverPrefetcher
```javascript
import React, {Fragment} from 'react';
import {OnHoverPrefetcher} from 'react-prefetcher';
export default () => (
Asset prefetching happens when the user hovers this `
` tag
);
```
### OnClickPrefetcher
```javascript
import React, {Fragment} from 'react';
import {OnClickPrefetcher} from 'react-prefetcher';
export default () => (
Asset prefetching happens when the user clicks this `
` tag
);
```
### Prefetcher
Customize prefetching by combining multiple interactions.
```javascript
import React, {Fragment} from 'react';
import Prefetcher from 'react-prefetcher';
export default () => (
1. Prefetches https://example.com/on-render-asset-url on render of this `
` tag.
2. Prefetches https://example.com/on-hover-asset-url when the user hovers this `` tag.
3. Prefetches https://example.com/on-click-asset-url when the user clicks this `` tag.
);
```
### Possible values for assets
1. URL
2. Array of URLs
3. Object with custom fetcher
#### URL as asset:
```javascript
```
#### Array of URLs:
```javascript
```
#### Custom fetcher function:
```javascript
{
/*custom fetcher that gets invoked on render*/
},
}}
/>
```
## Contributing
Pull requests are welcome.
## License
[MIT](https://github.com/manojVivek/react-prefetcher/blob/master/LICENSE)