useFills hooks


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();
    // Match only the fills for this name.
    .find(fill => === 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 {

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 =;
  const menuFills = useFills("Menu items");

  return (
      <Slot name="Before menu" />
        { => (
            <Link href={item[1]}>{item[0]}</Link>
        {{ Fill, props }) => (
            <Fill {...props} />
      <Slot name="After menu" />

Closed as this is going finally going to be released as part of Slot and Fill.