Skip to content

Commit

Permalink
Update README.md on SlotFills to add info + example about the prop `f…
Browse files Browse the repository at this point in the history
…illProps` (WordPress#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 <nickmdiego@gmail.com>

* Update packages/components/src/slot-fill/README.md

Co-authored-by: Nick Diego <nickmdiego@gmail.com>

---------

Co-authored-by: Nick Diego <nickmdiego@gmail.com>
  • Loading branch information
2 people authored and sethrubenstein committed Jul 13, 2023
1 parent 6c3c4d9 commit db7d3fc
Showing 1 changed file with 26 additions and 1 deletion.
27 changes: 26 additions & 1 deletion packages/components/src/slot-fill/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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_:

Expand All @@ -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>
);
);
```

0 comments on commit db7d3fc

Please sign in to comment.