-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
- Loading branch information
Fabien JUIF
committed
Oct 5, 2016
1 parent
5dd88a3
commit 0d862e8
Showing
7 changed files
with
283 additions
and
163 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,100 +1,58 @@ | ||
| # react-loader | ||
| ## what is this? | ||
| This is a higher order component (`HOC`). | ||
| This HOC purpose is to call a `load` callback passes in `props` of a component only once (at `componentWillMount`). | ||
| This is convenient to load data from a `backend` for instance. | ||
| # hoc-react-loader | ||
| [](https://circleci.com/gh/Zenika/react-loader/tree/master) [](https://www.npmjs.com/package/hoc-react-loader) [](https://coveralls.io/github/Zenika/react-loader?branch=master) | ||
|
|
||
| It shows a loading component when it's waiting for the props to be defined. | ||
| This loading component can be changed easely. | ||
| This is a higher order component ("HOC"). Its 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. | ||
|
|
||
| ## try it | ||
| ## Demos | ||
| You can test some examples [here](https://zenika.github.io/react-loader/). | ||
|
|
||
| ## install | ||
| ## Installation | ||
| `npm i --save hoc-react-loader` | ||
|
|
||
| ## use | ||
| You have to wrap your component, and give a `load` props to that resulted component. | ||
| ## Usage | ||
| ### With `this.props` | ||
| ```es6 | ||
| import loader from 'hoc-react-loader' | ||
|
|
||
| You can also add an optional configuration object as second parameter. | ||
| const Component = ({ data }) => <div>Component {JSON.stringify(data)}</div> | ||
|
|
||
| Parameter | Needed | Default value | Description | ||
| ----------|--------|---------------|------------- | ||
| `Loader` | no | `Dots` | A component that will be display depending on `prop` value. | ||
| `prop` | no | `loaded` | A prop name that determine when to display the `Loader` component. | ||
| `wait` | no | `true` | Set to `false` if you don't want to wait for the `prop` to be set. | ||
| export default loader(Component, { wait: ['data'] }) | ||
| ``` | ||
| In this case, the loader waits for `this.props.data` to be truthy, then mounts its child component and calls `this.props.load` if it exists. This is useful when the parent has control over the injected data, or when the `Component` is connected with `redux`. `this.props.load` should be injected by the parent component or injected by a `Container` (redux). | ||
|
|
||
| ### Simple example with `redux` : | ||
| The `wait` parameter should be an array of props to waits. All these props should become truthy at some point. | ||
|
|
||
| **Component.js** | ||
| ```(javascript) | ||
| import React from 'react' | ||
| export default ({ text }) => <div>{text}</div> | ||
| ``` | ||
| Since the `Loader` is not specified, the default `Loader` is displayed while waiting for all the props. Here's an exemple with a specified loader: | ||
| ```es6 | ||
| import loader from 'hoc-react-loader' | ||
|
|
||
| const MyLoader = () => <div>Waiting...</div> | ||
| const Component = ({ data }) => <div>Component {data}</div> | ||
|
|
||
| **Container.js** | ||
| ```(javascript) | ||
| import { connect } from 'react-redux' | ||
| import reactLoader from 'hoc-react-loader' | ||
| import { fetchText } from '%%your_actions%%' | ||
| import Component from './Component' | ||
| const mapStateToProps = ({ text }) => { | ||
| return { | ||
| text, | ||
| } | ||
| } | ||
| const mapDispatchToProps = (dispatch) => { | ||
| return { | ||
| load: () => dispatch(fetchText()), | ||
| } | ||
| } | ||
| export default connect(mapStateToProps, mapDispatchToProps)(reactLoader(Component)) | ||
| export default loader(Component, { wait: ['data'], Loader: MyLoader }) | ||
| ``` | ||
|
|
||
| The `fetchText` may be an [redux-thunk](https://github.com/gaearon/redux-thunk) action that fetch a text to a `backend`, and update the state : `state.text`. | ||
| ### Don't wait | ||
| ```es6 | ||
| import loader from 'hoc-react-loader' | ||
|
|
||
| ### Advanced example with `redux` : | ||
| const Component = ({ data }) => <div>Component {JSON.stringify(data)}</div> | ||
|
|
||
| **Component.js** | ||
| ```(javascript) | ||
| import React from 'react' | ||
| export default ({ text }) => <div>{text}</div> | ||
| export default loader(Component, { wait: false }) | ||
| ``` | ||
| In this example, the loader component doesn't wait for props. `this.props.load` is called once, but the `Loader` component isn't displayed. | ||
|
|
||
| **Loader.js** | ||
| ```(javascript) | ||
| import React from 'react' | ||
| export default () => <div>loading...</div> | ||
| ``` | ||
| ### Load as a parameter | ||
| ```es6 | ||
| import loader from 'hoc-react-loader' | ||
|
|
||
| const Component = ({ data }) => <div>Component {JSON.stringify(data)}</div> | ||
|
|
||
| **Container.js** | ||
| ```(javascript) | ||
| import { connect } from 'react-redux' | ||
| import reactLoader from 'hoc-react-loader' | ||
| import { fetchText } from '%%your_actions%%' | ||
| import Component from './Component' | ||
| import Loader from './Loader' | ||
| const mapStateToProps = ({ text, isTextFetched }) => { | ||
| return { | ||
| text, | ||
| fetched: isTextFetched, | ||
| } | ||
| } | ||
| const mapDispatchToProps = (dispatch) => { | ||
| return { | ||
| load: () => dispatch(fetchText()), | ||
| } | ||
| } | ||
| export default connect(mapStateToProps, mapDispatchToProps)(reactLoader(Component, { | ||
| Loader, | ||
| prop: 'fetched' | ||
| })) | ||
| export default loader(Component, { load: () => console.log('here') }) | ||
| ``` | ||
| In this case, the loader calls `this.props.load` if it exists *AND* the `load` parameter, resulting in `here` to be printed. | ||
|
|
||
| The default `wait` parameter value is `false`. It means that in this example the `Loader` isn't displayed. | ||
|
|
||
| The `Loader` component will displayed instead of `Component` as long as `prop` value is false. | ||
| ### Wait as a function | ||
| The `wait` parameter can also be a function. Then the `context` and `props` are given to it, and it should return the array of props to wait for. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| #!/bin/bash | ||
|
|
||
| IFS=$'\n' | ||
| for f in $(git show-ref --heads); do | ||
| hash=$(echo ${f} | cut -d' ' -f1) | ||
| file=$(echo ${f} | cut -d' ' -f2) | ||
|
|
||
| echo ${hash} > ".git/${file}" | ||
| done |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.