diff --git a/packages/components/src/higher-order/with-filters/README.md b/packages/components/src/higher-order/with-filters/README.md index 244b226445c16..7c2840ad90eac 100644 --- a/packages/components/src/higher-order/with-filters/README.md +++ b/packages/components/src/higher-order/with-filters/README.md @@ -7,25 +7,60 @@ Wrapping a component with `withFilters` provides a filtering capability controll ## Usage ```jsx -import { withFilters } from '@wordpress/components'; +import { Fragment, withFilters } from '@wordpress/components'; import { addFilter } from '@wordpress/hooks'; -const ComposedComponent = () =>
Composed component
; +const MyComponent = ( { title } ) =>

{ title }

; + +const ComponentToAppend = () =>
Appended component
; + +function withComponentApended( FilteredComponent ) { + return ( props ) => ( + + + + + ); +} addFilter( 'MyHookName', - 'example/filtered-component', - ( FilteredComponent ) => () => ( -
- - -
- ) + 'my-plugin/with-component-appended', + withComponentApended ); -const MyComponentWithFilters = withFilters( 'MyHookName' )( - () =>
My component
-); +const MyComponentWithFilters = withFilters( 'MyHookName' )( MyComponent ); ``` `withFilters` expects a string argument which provides a hook name. It returns a function which can then be used in composing your component. The hook name allows plugin developers to customize or completely override the component passed to this higher-order component using `wp.hooks.addFilter` method. + +It is also possible to override props by implementing a higher-order component which works as follows: + +```jsx +import { Fragment, withFilters } from '@wordpress/components'; +import { addFilter } from '@wordpress/hooks'; + +const MyComponent = ( { hint, title } ) => ( + +

{ title }

+

{ hint }

+
+); + +function withHintOverriden( FilteredComponent ) { + return ( props ) => ( + + ); + } + +addFilter( + 'MyHookName', + 'my-plugin/with-hint-overriden', + withHintOverriden +); + +const MyComponentWithFilters = withFilters( 'MyHookName' )( MyComponent ); +```