https://github.com/unirakun/hoc-react-loader
Calls the load function from props at mount
https://github.com/unirakun/hoc-react-loader
hoc indicator loader loading nantes react zenika
Last synced: about 1 year ago
JSON representation
Calls the load function from props at mount
- Host: GitHub
- URL: https://github.com/unirakun/hoc-react-loader
- Owner: unirakun
- License: mit
- Created: 2016-08-12T11:36:15.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T17:10:42.000Z (over 3 years ago)
- Last Synced: 2025-04-10T16:15:00.406Z (about 1 year ago)
- Topics: hoc, indicator, loader, loading, nantes, react, zenika
- Language: JavaScript
- Homepage: https://alakarteio.github.io/hoc-react-loader/
- Size: 2.49 MB
- Stars: 32
- Watchers: 8
- Forks: 6
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hoc-react-loader
[](https://circleci.com/gh/unirakun/hoc-react-loader/tree/master) [](https://www.npmjs.com/package/hoc-react-loader) [](https://coveralls.io/github/unirakun/hoc-react-loader?branch=master)
This is a [higher order component](https://facebook.github.io/react/docs/higher-order-components.html) ("HOC"). It's an advanced pattern used in React that let you reuse code logic, it can be summarized as a component factory. It improves isolation, interoperability and maintainability of your code base.
**hoc-react-loader**'s purpose is to call a `load` callback passed through the `props` of a component only once (at `componentWillMount`). This is convenient to load data from a backend for instance. The component shows a loading indicator when it's waiting for the props to be defined. The loading indicator can be changed easily.
- To see full documentation: [click here](./packages/core/README.md)
- Do you want a default LoadingIndicator and a default ErrorIndicator?, you can use [@hoc-react-loader/full](./packages/full/README.md)
- You want your bundle not being bloated?, you can use [@hoc-react-loader/core](./packages/core/README.md)
## Example
```jsx
import React from 'react'
import loader from '@hoc-react-loader/core'
const Component = ({ data }) =>
Component {JSON.stringify(data)}
const load = props => console.log(props)
export default loader({ print: ['data'], load })(Component)
```
In this example `load` will be called at first mount, then the wrapped `Component` will be printed only if `props.data` is truthy.
`load` function can be the moment you ask for your API data.
## Demos
You can test some examples [here](https://unirakun.github.io/hoc-react-loader/).
# About uni rakun
**uni rakun** is created by two passionate french developers.
Do you want to contact them ? Go to their [website](https://unirakun.fr)
