@@ -36,12 +36,12 @@ your component is dealing with:
36
36
import React from ' react'
37
37
import renderCallback from ' react-render-callback'
38
38
39
- // children may be a function, a component, an element, ...
40
39
class Component from React .Component {
41
40
state = {}
42
41
43
42
render () {
44
43
// can be any prop like render, component, renderHeader, ...
44
+ // children may be a function, a component, an element, ...
45
45
return renderCallback (this .props .children , this .state )
46
46
}
47
47
}
@@ -139,11 +139,11 @@ const renderCallback = require('react-render-callback')
139
139
- gracefully handles other types like string, array,
140
140
[ react elements] [ create-element ] , ...
141
141
142
- ** props** (optional): to pass to ` renderable ` (if renderable is a function or react element type)
142
+ ** props** (optional): to pass to ` renderable `
143
143
144
144
** options** (optional):
145
145
146
- - ` cloneElement ` (default: ` false ` , since: v1.1.0): allows to pass props to
146
+ - ` cloneElement ` (default: ` false ` , since: v1.1.0): allows to pass ` props ` to
147
147
the element using [ ` React.cloneElement ` ] [ clone-element ]
148
148
149
149
``` js
@@ -156,6 +156,7 @@ renderCallback(<a href="#bar">bar</a>, {title: 'foo'}, {cloneElement: true})
156
156
157
157
** returns**
158
158
159
+ - the created react element
159
160
- ` false ` , ` null ` , ` undefined ` and ` true ` are returned as ` null `
160
161
just like in [ JSX] ( https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored )
161
162
- the value as is for all other values
@@ -191,7 +192,7 @@ renderCallback(1, 2, 3)
191
192
192
193
** returns**
193
194
194
- a function (` (...args) => ... ` )
195
+ a function (` (...args) => ... ` ) to render the args
195
196
196
197
### Examples
197
198
@@ -201,8 +202,8 @@ A basic example showing the most common use cases can be viewed/edited at [codes
201
202
202
203
[ ![ Edit] ( https://codesandbox.io/static/img/play-codesandbox.svg )] ( https://codesandbox.io/s/mj5py581oy )
203
204
204
- > This option allows to pass down props without to need to create a function
205
- > within render which merges the parent and received props.
205
+ > This option allows to pass down ` props ` without to need to create a function
206
+ > within render which merges the defined and provided props.
206
207
207
208
``` js
208
209
class CountSeconds extends React .Component {
@@ -281,23 +282,29 @@ const App = () => (
281
282
)
282
283
```
283
284
284
- #### Use ` createRender ` to interop with a library which only supports function as render-prop
285
+ #### Use ` createRender ` to interop with a library which only supports functions as render-prop
285
286
286
287
[ ![ Edit] ( https://codesandbox.io/static/img/play-codesandbox.svg )] ( https://codesandbox.io/s/1qyqwq14jq )
287
288
288
289
``` js
289
290
import Toggle from ' react-toggled'
290
291
291
- const Toggler = ({on, getTogglerProps, onLabel, offLabel}) => (
292
- < div>
293
- < button {... getTogglerProps ()}> Toggle me< / button>
294
- < div> {on ? onLabel : offLabel}< / div>
295
- < / div>
296
- )
292
+ class Toggler extends React .Component {
293
+ static defaultProps = {
294
+ onLabel: ' Toggled On' ,
295
+ offLabel: ' Toggled Off' ,
296
+ }
297
297
298
- Toggler .defaultProps = {
299
- onLabel: ' Toggled On' ,
300
- offLabel: ' Toggled Off' ,
298
+ render () {
299
+ const {on , getTogglerProps , onLabel , offLabel } = this .props
300
+
301
+ return (
302
+ < div>
303
+ < button {... getTogglerProps ()}> Toggle me< / button>
304
+ < div> {on ? onLabel : offLabel}< / div>
305
+ < / div>
306
+ )
307
+ }
301
308
}
302
309
303
310
const ToggleView = createRender (Toggler)
0 commit comments