Happeo UIkit logo
Components
Home
Packages
AlertsAvatarBannersBreadcrumbsButtonsButtonsDS3CardColor PickerColorsContent RendererEmojisFile IconFile PickerForm ElementsIcons AppIcons FileIcons FlagIcons LegacyIcons SymbolImage CarouselImage CropperImage GridImage array specsBroken ImagesPropsLayoutListLoadersMenusModalsNavigationThemeToastTypography

Image-grid

Name
@happeouikit/image-grid
Latest
1.1.19
License
MIT
Installation
yarn add @happeouikit/image-grid
Links
    Dependencies (6)
    • @happeouikit/colors@^1.0.4
    • @happeouikit/icons@^2.1.13
    • @happeouikit/loaders@^1.0.4
    • @happeouikit/theme@^1.0.4
    • @happeouikit/typography@^1.0.7
    • react-photo-gallery@^8.0.0

    Image grid to display multiple images in a grid.

    Image array specs

    The component takes in an array of images. An example array is below:

    const images = [
        {
          src: "https://source.unsplash.com/2ShvY8Lf6l0/800x599",
          alt: "This is alt text"
        },
        {
          src: "https://source.unsplash.com/u9cG4cuJ6bU/4927x1000",
          alt: "A wide image"
        }
      ];

    If no alt is given, the alt will be set blank ("").

    export const ImageGridSmallExample = () => {
      const images = [
        {
          src: "https://source.unsplash.com/2ShvY8Lf6l0/800x599",
          alt: "This is alt yo",
        },
        {
          src: "https://source.unsplash.com/collection/190727/1600x900",
          alt: "Image about stuff",
        },
        {
          src: "https://source.unsplash.com/qDkso9nvCg0/600x799",
          alt: "More alt stuff",
        },
        {
          src: "https://source.unsplash.com/random/400x400",
          alt: "There should always be alt",
        },
        {
          src: "https://source.unsplash.com/u9cG4cuJ6bU/4927x1000",
          alt: "A wide image",
        },
      ];
    

      return (
        <SmallContainer>
          <ImageGrid
            images={images}
            direction={"row"}
            columns={2}
            maxImages={3}
            onClickImage={({ image, index, event }) => {
              console.log(image, index, event);
            }}
          />
        </SmallContainer>
      );
    };
    

    const SmallContainer = styled.div`
      width: 400px;
    `;

    Image Grid with Target Row and Max Image Height

    <ImageGrid
        images={images}
        maxImages={3}
        maxImageHeight="208px"
        targetRowHeight={1}
        onClickImage={({ image, index, event }) => {
          console.log(image, index, event);
        }}
      />

    Broken Images

    If an image encounters an error on loading, an error state component will be rendered in place.

    Props

    Full react-photo-gallery API is supported. See full list here: http://neptunian.github.io/react-photo-gallery/api.html

    images
    Array<{ "src": "string", "alt": "string" }>
    []
    onClickImage
    func
    () => {}
    direction
    "column" │ "row"
    "row"
    columns
    number
    2
    margin
    number
    2
    maxImages
    number
    4
    maxImageHeight
    string
    undefined
    targetRowHeight
    number
    undefined