@mantyke/spotlight-image

React component for displaying images with zoom, pan, and fullscreen capabilities.

Source
View source code
Package
@mantyke/spotlight-image
Docs
Edit this page
Built by
JM (@Toshinaki)
License
MIT

Installation

yarn add @mantyke/spotlight-image

SpotlightImage demo

Mountain landscape
import { SpotlightImage } from '@mantyke/spotlight-image';

function Demo() {
  return (
    <SpotlightImage
      src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
      alt="Mountain landscape"
      width={300}
      height={200}
      radius="md"
    />
  );
}
Mountain landscape
Width
Height
Radius
Zoom speed
Max zoom
import { SpotlightImage } from '@mantyke/spotlight-image';

function Demo() {
  return <SpotlightImage width={300} height={200} radius="md" />;
}

Other subtitle

Other content

Note: This is a note You can use markdown in this block as well

  • List item 1
  • List item 2 As well as links: Mantine

And inline code npm install mantine

And code blocks:

import { Button } from '@mantine/core';

function App() {
  return <Button>Hello</Button>;
}