Image Gallery
In this example, we demonstrate how to replace our default image Gallery
component with a custom implementation. The Gallery
component is a child of Attachment
, so we'll need
to create a custom Attachment
component as well.
React Image Gallery
In this example, we are going to use the react-image-gallery
dependency. Many pre-built React image galleries exists, so this demo just shows one possible way to replace the
library's default Gallery
component.
We'll need to import a few additional modules into our app to access the main component, an item type, and the distributed CSS:
import ImageGallery, { ReactImageGalleryItem } from 'react-image-gallery';
import 'react-image-gallery/styles/css/image-gallery.css';
Custom Gallery
A custom component will always receive the same props as the library's default. In the case of Gallery
, the custom component
receives an array of image objects to be loaded. Each image object contains an image_url
key, which references the CDN-hosted
URL of the image.
The ImageGallery
component we've imported requires an items
prop. The items
prop accepts a similar array of image objects,
with the original
key as the only required type. The original
key references the image URL, similar to the image_url
key coming into the component via props.
To make the types line up, we manipulate the props array of images slightly, and pass into the ImageGallery
component.
const CustomGallery: React.FC<GalleryProps> = (props) => {
const { images } = props;
const updatedImages: ReactImageGalleryItem[] = [];
Object.values(images).forEach((image) => {
if (image.image_url) {
updatedImages.push({ original: image.image_url });
}
});
return <ImageGallery items={updatedImages} />;
};
Custom Attachment
In order to render our CustomGallery
component, we need to supply it as a prop to the
Attachment
component. The resulting CustomAttachment
component is then added to Channel
, so it can be injected into the
ComponentContext
and consumed within the Message UI component.
const CustomAttachment: React.FC<AttachmentProps> = (props) => (
<Attachment {...props} Gallery={CustomGallery} />
);
<Channel Attachment={CustomAttachment}>{/* children of Channel component */}</Channel>;
Implementation
Now that each individual piece has been constructed, we can assemble all of the snippets into the final code example.
The Code
import ImageGallery, { ReactImageGalleryItem } from 'react-image-gallery';
import 'react-image-gallery/styles/css/image-gallery.css';
const CustomGallery: React.FC<GalleryProps> = (props) => {
const { images } = props;
const updatedImages: ReactImageGalleryItem[] = [];
Object.values(images).forEach((image) => {
if (image.image_url) {
updatedImages.push({ original: image.image_url });
}
});
return <ImageGallery items={updatedImages} />;
};
const CustomAttachment: React.FC<AttachmentProps> = (props) => {
return <Attachment {...props} Gallery={CustomGallery} />;
};
const App = () => (
<Chat client={client}>
<ChannelList />
<Channel Attachment={CustomAttachment}>
<Window>
<ChannelHeader />
<MessageList />
<MessageInput />
</Window>
<Thread />
</Channel>
</Chat>
);