Skip to content
This repository was archived by the owner on Aug 23, 2022. It is now read-only.

Commit 77c5be3

Browse files
committed
Document mapProps receiving a function
1 parent e24c332 commit 77c5be3

File tree

2 files changed

+26
-3
lines changed

2 files changed

+26
-3
lines changed

docs/api/Control.md

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,18 +89,26 @@ It can also be a function that returns a string model. See [the documentation on
8989

9090
<h2 id="prop-mapProps"></h2>
9191
## `mapProps={\{...}}`
92-
_(Object)_: A mapping of control-specific property keys to prop-getter functions that taken in the original props and return the result prop. See [the documentation on custom controls](../guides/custom-controls.md) for more information.
92+
_(Object | Function)_: A custom mapping from props provided by `Control` to props received by the component. Can be:
9393

94-
Example:
94+
- An object, where each value is a function from original props to corresponding value in result props.
95+
- A function from original props to result props.
96+
97+
Examples:
9598
```jsx
9699
<Control
97100
mapProps={\{
98101
customChange: (props) => props.change,
99102
}}
100103
model="..."
101104
/>
105+
<Control
106+
mapProps={({change}) => { return {customChange: change}; }}
107+
model="..."
108+
/>
102109
```
103110

111+
See [the documentation on custom controls](../guides/custom-controls.md) for more information.
104112

105113
<h2 id="prop-updateOn"></h2>
106114
## `updateOn="..."`

docs/guides/custom-controls.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,5 +137,20 @@ Some custom controls won't have prop keys that match up exactly with the standar
137137
/>
138138
```
139139

140-
In `mapProps`, the **key** corresponds to the _custom_ control's prop key, and the **value** is a function that takes in the standard `props` applied to `<Control>` and returns the prop value that the custom prop should map to.
140+
If `mapProps` is an object, the **key** corresponds to the _custom_ control's prop key, and the **value** is a function that takes in the standard `props` applied to `<Control>` and returns the prop value that the custom prop should map to.
141141

142+
143+
```jsx
144+
<Control
145+
model="..."
146+
component={DatePickerIOS}
147+
mapProps={ ({modelValue, onChange}) => {
148+
return {
149+
date: modelValue,
150+
onDateChange: onChange,
151+
};
152+
}}
153+
/>
154+
```
155+
156+
If `mapProps` is a function, it is applied to the standard `props`, and its return value is used as _custom_ control's props.

0 commit comments

Comments
 (0)