A gallery of Thumbnails

Now we'll create a new brick which will be a gallery of thumbnails.

A small fix to our Thumbnail

Before we create the Gallery brick, we need to fix two small things inside our Thumbnail brick.

Open `Thumbnail.tsx` and change the highlighted lines as below:

1. Spread the {...rest} props over the main <div>
2. Change a bit the className to be included in a grid

// Thumbnail.tsx
import React from 'react'
import { types, Text, RichText, Image } from 'react-bricks/frontend'

interface ThumbnailProps {
  hasShadow: boolean
  bgColor: types.IColor
}

const Thumbnail: types.Brick<ThumbnailProps> = ({
  hasShadow,
  bgColor,
  ...rest
}) => {
  return (
    <div
      {...rest}
      className={`my-6 p-6 text-center border rounded-lg ${
        hasShadow ? 'shadow-xl' : ''
      } ${bgColor.className}`}
    >
      ...
    </div>
  )
}

Spreading the {...rest} props over the main <div> enables React Bricks to focus this brick when it is repeated inside of another brick.

The Gallery brick

Create a Gallery.tsx file inside the react-bricks/bricks directory.

// Gallery.tsx
import React from 'react'
import { types, Repeater } from 'react-bricks/frontend'

const Gallery: types.Brick = () => {
  return (
    <div className="max-w-5xl mx-auto py-8 px-4">
      <h1 className="text-4xl font-bold text-center">Gallery</h1>
      <div className="sm:grid grid-cols-3 gap-5">
        <Repeater propName="thumbnails" />
      </div>
    </div>
  )
}

Gallery.schema = {
  name: 'gallery',
  label: 'Gallery',
  getDefaultProps: () => ({
    thumbnails: [],
  }),
  repeaterItems: [
    {
      name: 'thumbnails',
      itemType: 'thumbnail',
      itemLabel: 'Thumbnail',
      max: 3,
    },
  ],
}

export default Gallery

Here you see two interesting things. The first is the new <Repeater> component. The second is the repeaterItems property in the schema.

Let's see how they work, starting by repeaterItems.

`repeaterItems` in schema

repeaterItems is an array with all the props that contain repeating items.

Each object has a prop name, a type of brick to repeat (itemType) and a label for the "Add" menu (itemLabel: if not provided it uses the repeated brick label). You may also specify the min and max number of items. In this case we specified that we want at most 3 thumbnails in our gallery.

The `Repeater` component

The <Repeater> component is where the items saved in a prop from therepeaterItems array are rendered.

The propName prop is required to know which prop contains the items to be repeated. There are other props to render wrappers around all the items or each item and to pass some prop down to all the items (see the docs in the reference below).

The result

You see that when you add this block there are no thumbnails, because we didn't specify any default for the "thumbnails" prop. You can do it as an exercise, using the Playground as a helper.

When the block is selected, you see that you have a "Add Thumbnail" button on the right sidebar, which adds a new Thumbnail in its default configuration

When you click on a single Thumbnail you may remove it or change its props.

Hide the single Thumbnail from the Add menu

In cases like this one, you usually don't want the single Thumbnail brick to be added directly on the page. The user should be able only to add a Gallery brick and then add Thumbnails inside of the Gallery.

To do this you need to set the hideFromAddMenu property to the Thumbnail's schema.

Thumbnail.schema = {
  name: 'thumbnail',
  label: 'Thumbnail',
  hideFromAddMenu: true,
  ...
}

Great! Now you are a guru of React Bricks.

You know almost anything you should need, and you can easily find any missing piece in the Docs. Well done!