Update README.md on SlotFills to add info + example about the prop `f…

…illProps` (#51013) * Update README.md Add info and example about `fillProps` prop on `Slot` * Update packages/components/src/slot-fill/README.md Co-authored-by: Nick Diego <[email protected]> * Update packages/components/src/slot-fill/README.md Co-authored-by: Nick Diego <[email protected]> --------- Co-authored-by: Nick Diego <[email protected]>
WordPress · Jun 1, 2023 · dca6a9c · dca6a9c · github-actions · Jun 1, 2023
1 parent df94b48
commit dca6a9c
Showing 1 changed file with 26 additions and 1 deletion.
diff --git a/packages/components/src/slot-fill/README.md b/packages/components/src/slot-fill/README.md
@@ -70,7 +70,7 @@ Both `Slot` and `Fill` accept a `name` string prop, where a `Slot` with a given
 
 `Slot` with `bubblesVirtually` set to true also accept an optional `className` to add to the slot container.
 
-`Slot` also accepts optional `children` function prop, which takes `fills` as a param. It allows to perform additional processing and wrap `fills` conditionally.
+`Slot` accepts an optional `children` function prop, which takes `fills` as a param. It allows you to perform additional processing and wrap `fills` conditionally.
 
 _Example_:
 
@@ -89,3 +89,28 @@ const Toolbar = ( { isMobile } ) => (
 	</div>
 );
 ```
+
+Props can also be passed from a `Slot` to a `Fill` by using the prop `fillProps` on the `Slot`:
+
+```jsx
+const { Fill, Slot } = createSlotFill( 'Toolbar' );
+
+const ToolbarItem = () => (
+	<Fill>
+		{ ( { hideToolbar } ) => {
+			<Button onClick={ hideToolbar }>Hide</Button>;
+		} }
+	</Fill>
+);
+
+const Toolbar = () => 
+	const hideToolbar() => {
+		console.log( 'Hide toolbar' );
+	}
+	return (
+		<div className="toolbar">
+			<Slot fillProps={ { hideToolbar } } />
+		</div>
+	);
+);
+```