diff --git a/docs/extending.md b/docs/extending.md
index 48f5ece2..daae03f9 100755
--- a/docs/extending.md
+++ b/docs/extending.md
@@ -16,11 +16,16 @@ Although possible, it may be cumbersome or even impractical to add a React build
Register a custom widget.
```js
-CMS.registerWidget(field, control, \[preview\])
+CMS.registerWidget(name, control, \[preview\])
```
**Params:**
+Param | Type | Description
+--- | --- | ---
+`name` | string | Widget name, allows this widget to be used via the field `widget` property in config
+`control` | React.Component \| string |
- React component that renders the control, receives the following props:
- **value:** Current field value
- **onChange**: Callback function to update the field value
- Name of a registered widget whose control should be used (includes built in widgets).
+[`preview`] | React.Component, optional | Renders the widget preview, receives the following props: - **value:** Current preview value
- **field:** Immutable map of current field configuration
- **metadata:** Immutable map of any available metadata for the current field
- **getAsset:** Function for retrieving an asset url for image/file fields
- **entry:** Immutable Map of all entry data
- **fieldsMetaData:** Immutable map of metadata from all fields.
* **field:** The field type which this widget will be used for.
* **control:** A React component that renders the editing interface for this field. Two props will be passed:
* **value:** The current value for this field.
@@ -43,7 +48,17 @@ var CategoriesControl = createClass({
}
});
-CMS.registerWidget('categories', CategoriesControl);
+var CategoriesPreview = createClass({
+ render: function() {
+ return h('ul', {},
+ this.props.value.map(function(val, index) {
+ return h('li', {key: index}, val);
+ })
+ );
+ }
+});
+
+CMS.registerWidget('categories', CategoriesControl, CategoriesPreview);
```