Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-spring-lightbox

Package Overview
Dependencies
Maintainers
1
Versions
88
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-spring-lightbox

A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.

  • 1.7.0-beta.11
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4.9K
increased by16.04%
Maintainers
1
Weekly downloads
 
Created
Source

react-spring-lightbox

npm NPM npm bundle size PRs Welcome Travis (.org)

React-spring-lightbox is a flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations.


Docs     Codesandbox

✨ Features

  • :point_up:    Mousewheel, swipe or click+drag to page photos
  • :keyboard:  Keyboard controls Esc
  • :mouse2:  Ctrl + Mousewheel or Trackpad Pinch to zoom
  • :mag_right:  Double/Single-tap or double/single-click to zoom in/out
  • :ok_hand:    Pinch to zoom
  • :point_left:  Panning on zoomed-in images
  • :checkered_flag:  Highly performant spring based animations via react-spring
  • No external CSS
  • Implement your own UI
  • Supports IE 11, Edge, Safari, Chrome, Firefox and Opera
  • Full typescript support
  • Supports any <img /> attribute including loading (lazy loading), srcset and aria-*

Install

yarn add react-spring-lightbox

Usage

The images prop now accepts a list of objects whose properties can be almost any valid React <img /> prop including srcset, loading (lazy loading) and aria-* attributes.

If you use typescript, the exact type can be imported from import { ImagesListType } from 'react-spring-lightbox';

import React, { useState } from 'react';
import Lightbox, { ImagesListType } from 'react-spring-lightbox';

const images: ImagesListType = [
    {
        src: 'https://timellenberger.com/static/blog-content/dark-mode/win10-dark-mode.jpg',
        loading: 'lazy',
        alt: 'Windows 10 Dark Mode Setting',
    },
    {
        src: 'https://timellenberger.com/static/blog-content/dark-mode/macos-dark-mode.png',
        loading: 'lazy',
        alt: 'macOS Mojave Dark Mode Setting',
    },
    {
        src: 'https://timellenberger.com/static/blog-content/dark-mode/android-9-dark-mode.jpg',
        loading: 'lazy',
        alt: 'Android 9.0 Dark Mode Setting',
    },
];

const CoolLightbox = () => {
    const [currentImageIndex, setCurrentIndex] = useState(0);

    const gotoPrevious = () =>
        currentImageIndex > 0 && setCurrentIndex(currentImageIndex - 1);

    const gotoNext = () =>
        currentImageIndex + 1 < images.length &&
        setCurrentIndex(currentImageIndex + 1);

    return (
        <Lightbox
            isOpen={true}
            onPrev={gotoPrevious}
            onNext={gotoNext}
            images={images}
            currentIndex={currentImageIndex}
            /* Add your own UI */
            // renderHeader={() => (<CustomHeader />)}
            // renderFooter={() => (<CustomFooter />)}
            // renderPrevButton={() => (<CustomLeftArrowButton />)}
            // renderNextButton={() => (<CustomRightArrowButton />)}
            // renderImageOverlay={() => (<ImageOverlayComponent >)}

            /* Add styling */
            // className="cool-class"
            // style={{ background: "grey" }}

            /* Handle closing */
            // onClose={handleClose}

            /* Use single or double click to zoom */
            // singleClickToZoom

            /* react-spring config for open/close animation */
            // pageTransitionConfig={{
            //   from: { transform: "scale(0.75)", opacity: 0 },
            //   enter: { transform: "scale(1)", opacity: 1 },
            //   leave: { transform: "scale(0.75)", opacity: 0 },
            //   config: { mass: 1, tension: 320, friction: 32 }
            // }}
        />
    );
};

export default CoolLightbox;

Props

PropDescription
isOpenFlag that dictates if the lightbox is open or closed
onCloseFunction that closes the Lightbox
onPrevFunction that changes currentIndex to previous image in images
onNextFunction that changes currentIndex to next image in images
currentIndexIndex of image in images array that is currently shown
renderHeaderA React component that renders above the image pager
renderFooterA React component that renders below the image pager
renderPrevButtonA React component that is used for previous button in image pager
renderNextButtonA React component that is used for next button in image pager
renderImageOverlayA React component that renders within the image stage, useful for creating UI overlays on top of the current image
singleClickToZoomOverrides the default behavior of double clicking causing an image zoom to a single click
imagesArray of image objects to be shown in Lightbox
classNameClasses are applied to the root lightbox component
styleInline styles are applied to the root lightbox component
pageTransitionConfigReact-Spring useTransition config for page open/close animation

Local Development

Clone the repo

git clone https://github.com/tim-soft/react-spring-lightbox.git react-spring-lightbox
cd react-spring-lightbox

Setup symlinks

yarn link
cd example
yarn link react-spring-lightbox

Run the library in development mode

yarn start

Run the example app in development mode

cd example
yarn dev

Changes to the library code should hot reload in the demo app

License

MIT © Tim Ellenberger

Keywords

FAQs

Package last updated on 28 Jul 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc