react-prefetcher - GitLite

KO | EN

gitlite — search

#mcp #pytorch #shell #dotnet #docker #artificial-intelligence #bash #cloud-native #self-hosted #editor

react-prefetcher

(★ 15)

A react library providing components that help with interaction-based asset pre-fetching. Demo -

File Explorer

ZIP Download

- - favicon.ico
  - index.html
  - manifest.json
- - App.css
  - App.js
  - App.test.js
  - index.css
  - index.js
  - serviceWorker.js
- .gitignore
- package-lock.json
- package.json
- README.md
- asset-manifest.json
- favicon.ico
- index.html
- manifest.json
- precache-manifest.f353fe2dcce57fdbfff016a75e042fe3.js
- service-worker.js
- index.js
- prefetcher.js
- prefetcher.test.js
.babelrc
.gitignore
index.js
LICENSE
package-lock.json
package.json
prettier.config.js
README.md

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

`npm install`

View Details ▼

Install Node packages.

npm {{[i|install]}}

Install dependencies listed in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

npm {{[i|install]}} {{package_name}} {{[-D|--save-dev]}}

Download the latest version of a package and add it to the list of dev dependencies in `package.json`:

🔍

`yarn`

View Details ▼

JavaScript and Node.js package manager alternative.

yarn global add {{module_name}}

Install a module globally:

yarn install

Install all dependencies referenced in the `package.json` file (the `install` is optional):

yarn add {{module_name}}@{{version}}

Install a module and save it as a dependency to the `package.json` file (add `--dev` to save as a dev dependency):

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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 () => (
  <Fragment>
    <OnRenderPrefetcher link="https://example.com/some-asset-url">
      <p>Asset prefetching happens when this `<p />` tag is rendered</p>
    </OnRenderPrefetcher>
  </Fragment>
);
```

### OnHoverPrefetcher

```javascript
import React, {Fragment} from 'react';
import {OnHoverPrefetcher} from 'react-prefetcher';

export default () => (
  <Fragment>
    <OnHoverPrefetcher link="https://example.com/some-asset-url">
      <p>Asset prefetching happens when the user hovers this `<p />` tag </p>
    </OnHoverPrefetcher>
  </Fragment>
);
```

### OnClickPrefetcher

```javascript
import React, {Fragment} from 'react';
import {OnClickPrefetcher} from 'react-prefetcher';

export default () => (
  <Fragment>
    <OnClickPrefetcher link="https://example.com/some-asset-url">
      <p>Asset prefetching happens when the user clicks this `<p />` tag </p>
    </OnClickPrefetcher>
  </Fragment>
);
```

### Prefetcher

Customize prefetching by combining multiple interactions.

```javascript
import React, {Fragment} from 'react';
import Prefetcher from 'react-prefetcher';

export default () => (
  <Fragment>
    <Prefetcher
      onRenderAssets="https://example.com/on-render-asset-url"
      onHoverAssets="https://example.com/on-hover-asset-url"
      onClickAssets="https://example.com/on-click-asset-url"
    >
      <p>
        1. Prefetches https://example.com/on-render-asset-url on render of this `<p />` tag.
        2. Prefetches https://example.com/on-hover-asset-url when the user hovers this `<p />` tag.
        3. Prefetches https://example.com/on-click-asset-url when the user clicks this `<p />` tag.
      </p>
    </Prefetcher>
  </Fragment>
);
```

### Possible values for assets

1. URL
2. Array of URLs
3. Object with custom fetcher

#### URL as asset:

```javascript
<Prefetcher onRenderAssets="https://example.com/on-render-asset-url" />
```

#### Array of URLs:

```javascript
<Prefetcher
  onRenderAssets={[
    'https://example.com/url',
    'https://example.com/another-url',
  ]}
/>
```

#### Custom fetcher function:

```javascript
<Prefetcher
  onRenderAssets={{
    href: 'an URL or id to prevent redundant fetch',
    fetcher: () => {
      /*custom fetcher that gets invoked on render*/
    },
  }}
/>
```

## Contributing

Pull requests are welcome.

## License

[MIT](https://github.com/manojVivek/react-prefetcher/blob/master/LICENSE)