React-Prefetcher
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
;; <Fragement> <OnRenderPrefetcher link="https://example.com/some-asset-url"> <p>Asset prefetching happens when this `<p />` tag is rendered</p> </OnRenderPrefetcher> </Fragment>;
OnHoverPrefetcher
;; <Fragement> <OnHoverPrefetcher link="https://example.com/some-asset-url"> <p>Asset prefetching happens when the user hovers this `<p />` tag </p> </OnHoverPrefetcher> </Fragment>;
OnClickPrefetcher
;; <Fragement> <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.
;; <Fragement> <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
- URL
- Array of URLs
- 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' { /*custom fetcher that gets invoked on render*/ } />
Contributing
Pull requests are welcome.