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 | +[`preview`] | React.Component, optional | Renders the widget preview, receives the following props: * **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); ```