Now we'll create a new brick which will be a gallery of thumbnails.
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:
{...rest}
props over the main <div>
// Thumbnail.tsximport React from 'react'import { types, Text, RichText, Image } from 'react-bricks/frontend'interface ThumbnailProps {hasShadow: booleanbgColor: 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.
Create a Gallery.tsx
file inside the react-bricks/bricks
directory.
// Gallery.tsximport 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
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 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).
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.
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!
Be the first to discover our latest news. No spam, promise.