Skip to content

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

License

Notifications You must be signed in to change notification settings

manojVivek/react-prefetcher

Folders and files

NameName
Last commit message
Last commit date
Jul 31, 2020
Jun 15, 2019
Jul 7, 2019
Jul 7, 2019
Jul 7, 2019
Jun 9, 2019
Jun 9, 2019
Sep 25, 2019
Jun 11, 2019
Jul 17, 2020
Dec 4, 2019
Jun 10, 2019

Repository files navigation

React-Prefetcher GitHub npm

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

Installation

Using npm:

npm install react-prefetcher

Using yarn:

yarn add react-prefetcher

Usage

OnRenderPrefetcher

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

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

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.

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:

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

Array of URLs:

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

Custom fetcher function:

<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