@santigp258/react-simple-lightbox-video-image
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

react-simple-lightbox-video-image

A simple and customizable react lightbox component that support video and image. Also enables swipe and doble tap gesture. This component can be compatible with Next js

NPM

Installation

yarn add @santigp258/react-simple-lightbox-video-image

Or

npm install @santigp258/react-simple-lightbox-video-image

Usage

Basic usage.

import React from 'react';
import ReactSimpleImageVideoLightbox, {
  ResourcersType,
} from '@santigp258/react-simple-lightbox-video-image';

const data: ResourcersType[] = [
  {
    title: 'Example title',
    type: 'photo',
    url:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
    altTag: 'example alt tag',
  },
  {
    title: 'Example title',
    type: 'photo',
    url: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
    altTag: 'example alt tag',
  },
];

const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const handleClose = () => {
    setIsOpen((state) => !state);
  };
  return (
    <>
      <button onClick={handleClose}>Toggle lightbox</button>
      {isOpen ? (
        <ReactSimpleImageVideoLightbox
          data={data}
          onCloseCallback={handleClose}
        />
      ) : null}
    </>
  );
};

Using with Next js

import React from 'react';
import Image from 'next/image';
import ReactSimpleImageVideoLightbox, {
  ResourcersType,
  VideoImagePropsType,
} from '@santigp258/react-simple-lightbox-video-image';

const data: ResourcersType[] = [
  {
    title: 'Example title',
    type: 'photo',
    url:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
    altTag: 'example alt tag',
  },
  {
    title: 'Example title',
    type: 'photo',
    url: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
    altTag: 'example alt tag',
  },
];

const renderCustomImage = (props: VideoImagePropsType) => {
  return (
    <Image
      title={props.title}
      className={props.className}
      onLoad={props.onLoad}
      alt={props.alt}
      src={props.src}
      loader={loaderImage}
      layout="fill"
      objectFit="contain"
    />
  );
};

const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const handleClose = () => {
    setIsOpen((state) => !state);
  };
  return (
    <>
      <button onClick={handleClose}>Toggle lightbox</button>
      {isOpen ? (
        <ReactSimpleImageVideoLightbox
          data={data}
          CustomImage={renderCustomImage}
          onCloseCallback={handleClose}
        />
      ) : null}
    </>
  );
};

Custom styling (CSS)

It's possible, to style each HTML element of this component separetely. This can be done either via inline styles or by assigning your own classes.

Overview of props

Prop name Description Data type Example Default
data Array of resources ResourcersType[] [{title: 'Example title',type: 'photo',url:'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',altTag: 'example alt tag', },]; undefined
startIndex Initial index number 2 0
showResourceCount Boolean indicator whether the resource count should be display. boolean false false
backdropBg Backdrop background color string white rgba(0,0,0,.5)

TODO:

  • Finish docs

Credits

This component extends some funcionality from react-image-video-lightbox

License

MIT © Santigp258

Package Sidebar

Install

npm i @santigp258/react-simple-lightbox-video-image

Weekly Downloads

3

Version

1.0.3

License

MIT

Unpacked Size

215 kB

Total Files

30

Last publish

Collaborators

  • santigp258