Description
Right now the only way to add a Slots in a theme is by using the Slot component.
That component is great for simple slots, but for more complex slots it’d be nice to receive the fills in an array. We can use a hook for that.
User stories
As a Frontity theme creator
I want to use a hook instead of a component for Slots
so that I can have more control of the insides
Possible solution
The useFills hook could be something like this:
const useFills = name => {
const { state } = useConnect();
Object.values(state.fills)
// Match only the fills for this name.
.find(fill => fill.name === name)
// Sort fills by priority.
.sort((a, b) => a.priority > b.priority)
// Add real component to the array.
.map(fill => {
const Fill = libraries.fills[fill.library];
return {
...fill,
Fill
};
});
};
And then use that hook instead of the Slot component.
For example, a theme can use useFills to render the fills in-between <li> tags after it has rendered other menu items:
const Menu = ({ state }) => {
const menuItems = state.theme.menu;
const menuFills = useFills("Menu items");
return (
<>
<Slot name="Before menu" />
<ul>
{menuItems.map(item => (
<li>
<Link href={item[1]}>{item[0]}</Link>
</li>
))}
{menuFills.map(({ Fill, props }) => (
<li>
<Fill {...props} />
</li>
))}
</ul>
<Slot name="After menu" />
</>
);
};