react-preload-link
A superversion of React Router's Link component that preloads your data before navigating. Built with and for React.
Demo
Live demo: https://sandervspl.github.io/react-preload-link/
Installation
NPM
npm install --save react-preload-link
YARN
yarn add react-preload-link
Usage
; const PreloadExample = { const loadProfile = { return ; }; const loadFriends = { return ; } return <div> <PreloadLink to="profile" load=loadProfile> View profile </PreloadLink> <PreloadLink to="friends" load=loadProfile loadFriends> View friends </PreloadLink> </div> ;};
Props
PreloadLinkProps
to (Required)
string
The URL to which the app will navigate to. If load
is used, it will navigate after the load
function(s) resolve. The only required prop.
load
() => Promise<any> | Array<() => Promise<any>>
Promise that will be resolved before navigating to the URL provided by to
. This can be a single function or multiple in an Array. Must be a function that returns a Promise! It will wait for everything to resolve before navigating.
Note: If you see an error that says "Can not read then of undefined" then one of your passed functions does not return a Promise.
onLoading, onSuccess, onFail, onNavigate
(defaultHook: () => void) => void
Overriding the default hooks, set with configure
, can be done with these props. The default hook is passed as a parameter.
loadMiddleware
(data: any) => void
Will fire for each of your resolved Promises. The resolved data is passed as a parameter.
Note: This will fire multiple times if you pass an Array to load
.
noInterrupt
boolean
| Defaultfalse
PreloadLinks with this prop can not have their load
be interrupted by any other PreloadLink.
className
string
The CSS class to be set on the <a>
element.
navLink
boolean
| Defaultfalse
Use React-Router's NavLink
instead of Link
. This will give it the same benefits as the regular NavLink
.
activeClassName
string
CSS class to be set on the <a>
element when its route is active.
onClick
() => void
For any methods that should be fired instantly on click. Use this for methods that are not async.
Note: will not fire if another PreloadLink process is busy and this process is not interruptible. This happens when a noInterrupt
PreloadLink was clicked.
Configuring lifecycle hooks
You can create hooks for the various lifecycle methods of PreloadLink. These functions will only be called if a load
prop is passed to the component. These functions will only be called once, even if you pass an array to load
. It's recommended to only use configure
once, like at the entry of your app.
Example
You can hook up a global loader with these hooks very easily. Here is an example on how to use NProgress together with PreloadLink.
;;
Type
PreloadLinkConfigOptions
onLoading
() => any
Fires once when the load process has started. Only fires when load
prop has been used.
onSuccess
() => any
Fires once when the all Promises have been resolved. Success is fired before navigation. Only fires when load
prop has been used.
onFail
() => any
Fires once when one of the Promised from load
fails or rejects. Only fires when load
prop has been used.
onNavigate
() => any
Fires once after navigation. Always fires.