Skip to content

Commit e0d6c01

Browse files
committed
doc: adjust wording to be more clear of the intent
1 parent 69de4e1 commit e0d6c01

File tree

1 file changed

+23
-16
lines changed

1 file changed

+23
-16
lines changed

README.md

+23-16
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,12 @@ your component is dealing with:
3636
import React from 'react'
3737
import renderCallback from 'react-render-callback'
3838

39-
// children may be a function, a component, an element, ...
4039
class Component from React.Component {
4140
state = {}
4241

4342
render() {
4443
// can be any prop like render, component, renderHeader, ...
44+
// children may be a function, a component, an element, ...
4545
return renderCallback(this.props.children, this.state)
4646
}
4747
}
@@ -139,11 +139,11 @@ const renderCallback = require('react-render-callback')
139139
- gracefully handles other types like string, array,
140140
[react elements][create-element], ...
141141

142-
**props** (optional): to pass to `renderable` (if renderable is a function or react element type)
142+
**props** (optional): to pass to `renderable`
143143

144144
**options** (optional):
145145

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
147147
the element using [`React.cloneElement`][clone-element]
148148

149149
```js
@@ -156,6 +156,7 @@ renderCallback(<a href="#bar">bar</a>, {title: 'foo'}, {cloneElement: true})
156156

157157
**returns**
158158

159+
- the created react element
159160
- `false`, `null`, `undefined` and `true` are returned as `null`
160161
just like in [JSX](https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored)
161162
- the value as is for all other values
@@ -191,7 +192,7 @@ renderCallback(1, 2, 3)
191192
192193
**returns**
193194

194-
a function (`(...args) => ...`)
195+
a function (`(...args) => ...`) to render the args
195196

196197
### Examples
197198

@@ -201,8 +202,8 @@ A basic example showing the most common use cases can be viewed/edited at [codes
201202

202203
[![Edit](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mj5py581oy)
203204

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.
206207
207208
```js
208209
class CountSeconds extends React.Component {
@@ -281,23 +282,29 @@ const App = () => (
281282
)
282283
```
283284

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
285286

286287
[![Edit](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/1qyqwq14jq)
287288

288289
```js
289290
import Toggle from 'react-toggled'
290291

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+
}
297297

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+
}
301308
}
302309

303310
const ToggleView = createRender(Toggler)

0 commit comments

Comments
 (0)