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 );
+```