react-fetch-preloader
Library for displaying preloader when response is longer than duration.
Motivation
You can see gif right above to understand idea.
Install
npm install --save react-fetch-preloaderyarn add react-fetch-preloader
Components
ShowPreloader
Properties
Required
url
Url of response - string
loaded
React component, when response is successful render this component
Not required
fetch
Function to fetch data. Default - window.fetch
duration
Number - if response is longer this value - show preloader(in ms). Default - 500
errored
React component, when response is failed render this component. Default -
null
preloader
React component for display preloader. Default -
<span>Loading...</span>
withPreloader HOC component
withPreloader provides two extra functions:
preload
Takes two specified params: id and url
renderPreloader
Takes one specified param: id
You can check example of using HOC in example section
More details and example
Basic examples
API is unstable now, so I need to figure out what will be the best realization.
Multiple fetches fires onClick
You can use ShowPreloader component for this purpose
;; const URL = 'https://randomuser.me/api/?results='; const SORT = 1 10; Component state = item: 10 ; { if item !== thisstateitem this; }; { const item = thisstate; return <div className="App"> <div className="sort"> SORT </div> <ShowPreloader duration=300 preloader=YourPreloaderComponent loaded=LoadedComponent errored=ErrorComponent url=`` /> </div> ; }
Fetches with HOC
You can use HOC component to fetch data in different places of your App
;;; ;; ; const Error = { console; return <h1>Oops : Error</h1>;}; Component { thisprops; }; { const renderPreloader = thisprops; return <div className="App"> <div className="sort"> <button type="button" onClick=this > Load 20 items </button> <button type="button" onClick=this > Load 10 items </button> </div> <div>Some content here</div> <div>And here...</div> </div> ; } const WrappedApp = ; const rootElement = document;ReactDOM;
You can clone this repository and check example
git clone https://github.com/mmarkelov/react-preloader.gitcd ./react-preloader/exampleyarn && yarn run dev
TODO
- Clearify tests
- Write clearer description
- Write more examples
- SSR