Gallery

RhGallery and RhGalleryItem are React components where RhGallery serves as the parent component responsible for displaying a gallery of items, and RhGalleryItem is a child component representing each item in the gallery.

Usage

Once installed, you can import the RhGallery component into your React application:

copy

import {RhGallery,RhGalleryItem} from "@rhythm-ui/react"

Then, you can use the RhGallery component in your JSX code:

copy

<div className="p-8">
  <RhGallery
    className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"
    onSelection={() => {}}
    position="center"
  >
    {[
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "1" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "2" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "3" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "4" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "5" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "6" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "7" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "8" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "9" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "10" },
    ].map((item) => (
      <RhGalleryItem id={item.id}>
        <RhImage className="m-0" src={item.src} />
      </RhGalleryItem>
    ))}
  </RhGallery>
</div>

Gallery Props

Name	Type	Description
children	Element \| Element[]	JSX Element \|\| List of JSX Elements
select	boolean	Determines whether to handle changes on selection or not
onSelection	(value: string[]) => void	Event fires when item selection changes
className	string	String value that defines the styles of the Gallery

Gallery Item Props

Name	Type	Description
children	ReactNode	JSX Element
select	boolean	Prop from the Gallery Parent Component. Determines whether to implement action buttons.
onSelect	(value: { id: string; selected: boolean; }) => void	On Select we can select the Gallery Item
selectedItems	string[]	List of Selected Gallery Items
isSelected	boolean	Determines whether the Gallery Item selected or not
id	string	s Determines the Id of the Gallery Item
className	string	String value that determines the styles

Gallery Action Button Props

Name	Type	Description
children	React.ReactNode	JSX Element
showIcon	boolean	Prop from the Gallery Item - Parent. Determines to show Action Icon.
id	string	Prop from the Gallery Item - Parent. Determines the Id of Gallery Item
position	"center" \| "topRight" \| "bottomRight" \| "bottomLeft"	Determines the position of the Action Icon
icon	ReactNode	JSX Element that represents the icon
onClick	(value: string) => void	Function that triggers whenever we tap on the Action Button

Select

The select prop determines whether to handle changes on selection or not. If the select prop is set to true, then events triggered by user selection will be handled.

copy

<div className="p-8">
  <RhGallery
    className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"
    onSelection={() => {}}
    position="center"
    select
  >
    {[
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "1" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "2" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "3" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "4" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "5" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "6" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "7" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "8" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "9" },
      { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "10" },
    ].map((item) => (
      <RhGalleryItem id={item.id}>
        <RhImage className="m-0" src={item.src} />
      </RhGalleryItem>
    ))}
  </RhGallery>
</div>

Actions

The RhGallery component allows you to add action buttons to the gallery using the RhGalleryActionButton child component. By defining the onClick event, you can specify the action that should be performed when the user clicks the button. This allows you to add further functionality

copy

function Actions(args) {
  const [show, setShow] = useState(null);
  const [galleryData, setGalleryData] = useState([
    { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "1" },
    { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "2" },
    { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "3" },
    { src: "https://bit.ly/placeholder-img", alt: "alt text", id: "4" },
  ]);
  const ShowImage = ({ src, setShow }) => {
    return (
      <>
        <div
          className="flex justify-center items-center fixed top-0 
          left-0 right-0 bottom-0 bg-gray-500 z-10 bg-opacity-90 "
        >
          <div className=" flex justify-center items-center  overflow-hidden">
            <RhImage src={src} className="max-h-full w-3/2 h-auto" />
          </div>
        </div>
        <div
          className="fixed top-4 z-50 right-2 cursor-pointer"
          onClick={() => setShow(false)}
        >
          <RhIcon
            icon="ant-design:close-circle-outlined"
            className="text-2xl"
          />
        </div>
      </>
    );
  };
  return (
    <div className="p-8">
      <RhGallery
        className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"
        position="center"
        onSelection={(value) => console.debug(value)}
      >
        {galleryData.map((item, idx) => (
          <RhGalleryItem key={item.id} id={item.id}>
            <RhImage src={item.src} className="max-h-full w-full m-0" />
            <RhGalleryActionButton
              onClick={() => {
                setShow(idx);
              }}
              position={"center"}
              icon={
                <RhIcon
                  className="text-2xl text-gray-700"
                  icon="heroicons:arrows-pointing-out-solid"
                />
              }
            />
            <RhGalleryActionButton
              onClick={(value) => {
                setGalleryData((prev) =>
                  prev.filter((item) => item.id !== value)
                );
              }}
              position="bottomRight"
              icon={
                <RhIcon
                  className="text-2xl text-gray-700"
                  icon="heroicons:trash-solid"
                />
              }
            />
            <div>
              {show === idx && <ShowImage src={item.src} setShow={setShow} />}
            </div>
          </RhGalleryItem>
        ))}
      </RhGallery>
    </div>
  );
}