npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-spring-lightbox

v1.8.0

Published

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

Downloads

21,657

Readme

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.

✨ 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

| Prop | Description | | -------------------- | ------------------------------------------------------------------------------------------------------------------ | | isOpen | Flag that dictates if the lightbox is open or closed | | onClose | Function that closes the Lightbox | | onPrev | Function that changes currentIndex to previous image in images | | onNext | Function that changes currentIndex to next image in images | | currentIndex | Index of image in images array that is currently shown | | renderHeader | A React component that renders above the image pager | | renderFooter | A React component that renders below the image pager | | renderPrevButton | A React component that is used for previous button in image pager | | renderNextButton | A React component that is used for next button in image pager | | renderImageOverlay | A React component that renders within the image stage, useful for creating UI overlays on top of the current image | | singleClickToZoom | Overrides the default behavior of double clicking causing an image zoom to a single click | | images | Array of image objects to be shown in Lightbox | | className | Classes are applied to the root lightbox component | | style | Inline styles are applied to the root lightbox component | | pageTransitionConfig | React-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