"Yet Another React Lightbox" custom plugin for image rotation

RotateExample.tsx

// based off of https://stackblitz.com/edit/yet-another-react-lightbox-examples?file=src/examples/FullscreenPlugin.tsx&initialPath=/examples/basic
import * as React from "react";

import Lightbox from "yet-another-react-lightbox";
import Rotate from "@/examples/RotatePlugin"

import { LightboxButton, Paragraph, Title } from "@/components";
import slides from "@/data/slides";

export default function RotateExample() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <Title>Rotate Plugin</Title>

      <Paragraph>
        Rotate plugin adds the "rotate" button.
      </Paragraph>

      <LightboxButton
        onClick={() => {
          setOpen(true);
        }}
      />

      <LightboxButton
        onClick={() => {
          setOpen(true);
        }}
      />

      <Lightbox
        open={open}
        close={() => setOpen(false)}
        slides={slides}
        plugins={[Rotate]}
      />
    </>
  );
}

RotatePlugin.tsx

import * as React from "react";
import { useState } from "react";

import {
  addToolbarButton,
  PluginProps,
  Slide,
} from "yet-another-react-lightbox";

export default function Rotate({ augment }: PluginProps) {
  const [rotationAngle, setRotationAngle] = useState(0);

  const rightRotateButton = (
    <button
      key="to-right-btn"
      type="button"
      onClick={() => {
        setRotationAngle((prevAngle) => prevAngle + 90);
      }}
    >
      R
    </button>
  );

  const renderSlide = ({ slide }: { slide: Slide }): React.ReactNode => {
    // Custom rendering logic for slide
    // Return a React node to render the custom slide
    return (
      <img
        src={slide.src}
        alt={slide.alt}
        style={{
          transform: `rotate(${rotationAngle}deg)`,
          transition: "transform 0.4s ease-in-out 0s",
        }}
      />
    );
  };

  augment(({ toolbar, download, render, ...restProps }) => ({
    toolbar: addToolbarButton(toolbar, "Rotate", rightRotateButton),
    render: {
      slide: renderSlide,
    },
    ...restProps,
  }));
}

RotatePluginExample.md

Rotate Plugin Example

Based off of the official example on Stackblitz