diff --git a/docs/customization/plugin-api.md b/docs/customization/plugin-api.md index db88ca71..245b5a14 100644 --- a/docs/customization/plugin-api.md +++ b/docs/customization/plugin-api.md @@ -293,7 +293,7 @@ const MyWrapSelectorsPlugin = function(system) { Wrap Components allow you to override a component registered within the system. -Wrap Components are function factories with the signature `(OriginalComponent, system) => props => ReactElement`. +Wrap Components are function factories with the signature `(OriginalComponent, system) => props => ReactElement`. If you'd prefer to provide a React component class, `(OriginalComponent, system) => ReactClass` works as well. ```javascript const MyWrapBuiltinComponentPlugin = function(system) { @@ -310,9 +310,12 @@ const MyWrapBuiltinComponentPlugin = function(system) { } ``` -```javascript -// Overriding a component from a plugin +Here's another example that includes a code sample of a component that will be wrapped: +```javascript +///// Overriding a component from a plugin + +// Here's our normal, unmodified component. const MyNumberDisplayPlugin = function(system) { return { components: { @@ -321,6 +324,7 @@ const MyNumberDisplayPlugin = function(system) { } } +// Here's a component wrapper defined as a function. const MyWrapComponentPlugin = function(system) { return { wrapComponents: { @@ -328,6 +332,7 @@ const MyWrapComponentPlugin = function(system) { if(props.number > 10) { return