Ant Design select dropdown with images preview

We all know dropdown selectors with options presented as a raw text. But what if we want to have more complex stuff there? Maybe images? Let's try what are the possibilities of Ant Design's Select component.

Select options

In general it's all about writing our own label renderer function for the dropdown option, because the library allows us to pass it as a prop to the Select component.

<Select labelRender={myLabelRender} options={myOptions} />

Please note that myOptions are not only value-label pairs, they need also an image source:

const myOptions = useMemo(() => [
    {
        value: 1,
        label: 'Label 1',
        imageSrc: 'some/nice/image-1.webp',
    },
    {
        value: 2,
        label: 'Label 2',
        imageSrc: 'some/nice/image-2.webp',
    },
], []);

Renderer function definition

const myLabelRender = useCallback((props: LabelInValueType) => {
    const item = myOptions.find((option) => option.value === props.value);

    if (item) {
        return (
            <div
                style={{
                    display: 'flex',
                    flexFlow: 'row nowrap',
                    alignItems: 'center',
                }}
            />
            <div style={{ marginRight: '10px' }}>
                <CloudflareImage
                    width={100}
                    height={50}
                    style={{ objectFit: 'contain' }}
                    src={item.imageSrc}
                    alt={item.label}
                />
            </div>
            <div>
                {item.label}
            </div>
            </div>
        );
    }
}, [myOptions]);

This function is going to render a custom select dropdown option as a row which contains an image and a text - but you can put anything there, e.g. action buttons.

See also 🔗 Cloudflare image optimization in Next.js