7 |
8 |
9 |
10 | hoc-react-loader
11 |
12 |
13 |
26 |
27 |
28 | This is a higher order component ("HOC").
29 | Its purpose is to call a
30 |
load
31 | callback passed through the
32 |
props
33 | of a component only once (at
34 |
componentWillMount
35 | ). This is convenient to load
36 | data from a backend for instance. The component shows a loading indicator when it's
37 | waiting for the props to be defined. The loading indicator can be changed easily.
38 |
39 |
40 |
41 | Check out the examples below. Use the button to trigger a stubbed loading.
42 |
43 |
44 |
45 |
14 |
}
20 | >
21 |
22 |
Base: `this.props.loaded` is defined
23 |
24 | In this example, the loader wraps a Component with
25 |
this.props.loaded
26 | defined. It means that the loader calls
27 |
this.props.load
28 | if presents, then waits for
29 |
this.props.loaded
30 | to be truthy, and finally displays the wrapped components. While waiting for
31 |
this.props.loaded
32 | to be truthy, hoc-react-loader takes care of displaying a spinner based on the background color.
33 |
34 |
35 |
36 |
37 |
}
43 | >
44 |
45 |
OneParam: waiting for a given param
46 |
47 | Like in the previous example, the default loading indicator is used (the spinner) and
48 |
this.props.load
49 | is called. But this time, the
50 |
HOC
51 | waits for
52 |
this.props.prop
53 | as specified in the
54 |
print
55 | param.
56 |
57 |
58 |
59 |
60 |
}
66 | >
67 |
68 |
TwoParams: wait for multiple props
69 |
70 | If the
71 |
print
72 | parameter is given an array of props instead of just one prop,
73 |
hoc-react-loader
74 | will wait for all of the specified props to be truthy. In this example, these are
75 |
prop
76 | and
77 |
prop2
78 | .
79 |
80 |
81 |
82 |
83 |
}
89 | >
90 |
91 |
DontWait: don't show the placeholder
92 |
93 | If the
94 |
print
95 | param is set to
96 |
true
97 | the
98 |
hoc-react-loader
99 | will not display the loading indicator (default or custom). But
100 |
this.props.load
101 | is still called if presents!
102 |
103 |
104 |
105 |
106 |
}
112 | >
113 |
114 |
LoadingIndicator: change the default loading indicator
115 |
116 | In this example, the default loading indicator is replaced with a custom one.
117 | The component waits for the default prop (
118 |
this.props.loaded
119 | ).
120 |
121 |
122 |
123 |
}
129 | >
130 |
131 |
Error: defaults parameters
132 |
133 | In this example, the loader wraps a Component with its default parameters.
134 | The loader will wait fo
135 |
this.props.error
136 | to bre truthy and will then display the default error component.
137 |
138 |
139 |
140 |
}
146 | >
147 |
148 |
ErrorIndicator: change the default error indicator
149 |
150 | In this example, the default error indicator is replaced with a custom one.
151 | The component waits for the default prop (
152 |
this.props.error
153 | ) before displaying it.
154 |
155 |
156 |
157 |
Wait ...
6 |
7 | const LoadingIndicator = ({ className }) => (
8 | 
