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-gallery-designer

v1.4.5

Published

react component for creating image galleries, carousels, lightbox-like layouts and more

Downloads

2,242

Readme

React Gallery Designer

Build Status

Known Vulnerabilities

Installation

yarn

$ yarn add react-gallery-designer

npm

$ npm install react-gallery-designer

The UMD build is also available on unpkg:

<script src="https://unpkg.com/react-gallery-designer/umd/react-gallery-designer.min.js"></script>

If you use the UMD build you can find the library on window.__RGD.

Demos

lightbox
rotator
fade
rss
carousel

Props

images (required)

type: array
description: Array of objects representing the props for each image. This library uses react-image-designer for each image (and thumbnail) in the gallery. In addition to the props from react-image-designer, you may also define the following:

- link

default: ""
type: string
description: Url to link image.

- target

default: false
type: boolean
description: add target="_blank" rel="noopener noreferrer" to the a tag.

- index

default: 0
type: number
description: Index of image in array. Array will be sorted to user defined order if index is provided.

- caption

default: ""
type: string
description: Caption for image.

additionally the following props are not modifiable on the image object because they are either taken care of at the global level, or are handled by react-gallery-designer internally (and changing that would break it):

  • id
  • className
  • contain
  • tag

settings

- lightbox

default: false
type: boolean
description: Displays all images in a row wrap flex-box, and expands an image to full screen on click with "next", and "prev" controls. Returns to previous view state on click when expanded.

- inview

default: 1
type: number
description: Number of images visible on screen at one time.

- auto

default: false
type: boolean
description: If slide should start rotating right away.

- noImages

default: false
type: boolean
description: Useful for a rotating rss feed or similar application.

- direction

default: "left"
type: string
description: Direction in which the gallery should rotate. Options include "left", "right", "up", "down".

- orientation

default: "horizontal"
type: string
description: Orient gallery vertically or horizontally.

- animation

default: "slide"
type: string
description: Type of animation for gallery. Options include "slide", "carousel", "book", "flip", "fade".

- speed

default: 2000
type: number
description: How much time (in milliseconds) each image will remain in place.

- timingfn

default: "ease-in-out"
type: string
description: css timing function for transitions.

- transitionspeed

default: 0.25
type: number
description: How fast the transitions are.

- playpause

default: false
type: boolean
description: Puts a play/pause button in the top left (while mouse is over gallery container).

- pauseonhover

default: false
type: boolean
description: If the gallery should pause while hovering.

- arrows

default: false
type: boolean
description: Puts arrow on the left and right of the gallery container (while mouse is over gallery container).

- advance

default: 1
type: number
description: How many images the gallery should advance every interval.

- startposition

default: "center"
type: string
description: Position of the first image in the gallery relative to other images in view. Options include "left", "right", "center".

- showcaptions

default: false
type: boolean
description: If caption prop is supplied for each image, display caption over image.

- linkslides

default: false
type: boolean
description: If link prop is supplied for each image, make image a clickable link.

- thumbnails

default: false
type: boolean
description: Displays thumbnails under gallery container. Brings corresponding image into view on click.

- contain

default: false
type: boolean
description: Sets background-size of image to contain.

- playIcon

default: "▶"
type: string
description: HTML to use for play button.

- pauseIcon

default: "⏸"
type: string
description: HTML to use for pause button.

- nextIcon

default: "›"
type: string
description: HTML to use for next button.

- prevIcon

default: "‹"
type: string
description: HTML to use for prev button.

- tag

default: "div"
type: string
description: Tag to use for images. Will use src if img is used. Else images will render as background-image.

- imagePercentHigh

default: thumbnails ? 80 : 100
type: number
description: Percent of the height of the gallery container to use as the height of each image.

- thumbPercentHigh

default: thumbnails ? 15 : 0
type: number
description: Percent of the height of the gallery container to use as the height of each thumbnail.

- lbSmallPercentHigh

default: 30
type: number
description: Percent of the height of the gallery container to use as the height of each small lightbox image.

style

description: Style for to the gallery container.

thumbnailStyle

description: Style for to the thumbnails.

imgStyle

description: Style for to the images.

captionStyle

description: Style for to the captions.

lightboxStyle

description: Style for to full screen images when in lightbox mode.

controlStyle

description: Style for to the play/pause and next/prev buttons.

className

description: Class for the gallery container.

id

description: Id for the gallery container.

imgClass

description: Class for gallery images.

captionClass

description: Class for image captions.

thumbnailClass

description: Class for thumbnail images.

controlClass

description: Class for the play/pause and next/prev buttons.

examples

commonjs

import Gallery from "react-gallery-designer";

const ids = [15, 20, 25, 30, 35, 40, 45, 50 , 55, 145, 150];

const images = ids.map((id, i) => ({
  src: `/imgs/IMG_${id}-1900.jpg`,
  placeholder: `/imgs/IMG_${id}-100.jpg`,
  srcset: `/imgs/IMG_${id}-1900.jpg 1900w,
          /imgs/IMG_${id}-1200.jpg 1200w,
          /imgs/IMG_${id}-768.jpg 768w,
          /imgs/IMG_${id}-480.jpg 480w,
          /imgs/IMG_${id}-300.jpg 300w`,
  sizes: `(max-width: 320px) 320w,
          (max-width: 480px) 480w,
          (max-width: 768px) 768w,
          (max-width: 1200px) 1200w,
          1900px`,
  link: `https://link-${id}.com`,
  target: true,
  index: i,
  caption: `super cool caption ${i}`,
  style: {borderRight: "red solid 10px"},
  repeat: true,
  position: "bottom right",
  children: "... some more children here ...",
  alt: "SOOPERKEWLIMGOMG",
  timeout: 500
}));

const settings = {
  lightbox: false,
  inview: 5,
  auto: true,
  noImages: false,
  direction: "right",
  orientation: "horizontal",
  animation: "carousel",
  speed: 3500,
  timingfn: "linear",
  transitionspeed: 0.333333,
  playpause: true,
  pauseonhover: true,
  arrows: true,
  advance: 2,
  startposition: "right",
  showcaptions: true,
  linkslides: true,
  thumbnails: true,
  contain: true,
  playIcon: "PLAY",
  pauseIcon: "PAUSE",
  nextIcon: "NEXT",
  prevIcon: "PREV",
  tag: "figure"
};

const SuperCoolGallery = props => (
  <Gallery
    {...props}
    settings={settings}
    images={images}
  />
)

umd

see ./examples/umdLightbox.html

<div id="react-gallery"></div>
<script>
  var ids = [
    15,
    20,
    25,
    30,
    35,
    40,
    45,
    50,
    55,
    60,
    65,
    70,
    75,
    80,
    85,
    90,
    95,
    125,
    130,
    135,
    140,
    145,
    150,
    155,
    160,
    165,
    170,
    175,
    180,
    190,
    195,
    200
  ];

  var imgs = ids.map(function(id, i) {
    return {
        src: `/imgs/IMG_${id}-1900.jpg`,
        placeholder: `/imgs/IMG_${id}-100.jpg`,
        srcset: `/imgs/IMG_${id}-1900.jpg 1900w,
                /imgs/IMG_${id}-1200.jpg 1200w,
                /imgs/IMG_${id}-768.jpg 768w,
                /imgs/IMG_${id}-480.jpg 480w,
                /imgs/IMG_${id}-300.jpg 300w`,
        sizes: `(max-width: 320px) 320w,
                (max-width: 480px) 480w,
                (max-width: 768px) 768w,
                (max-width: 1200px) 1200w,
                1900px`
      }
    });

  var settings = {
    lightbox: true
  };

  return __RGD({
    images: imgs,
    settings: settings,
    style: {
      width: "600px",
      maxWidth: "95%",
      margin: "0 auto"
    },
    domId: "react-gallery"
  })

</script>

Try Things Live

To test the options, git clone this repo, put some images in the 'imgs' directory, or grab them from whatever remote resource, and set-up your configuration. Then run yarn start ./relative/path/from/src/to/configuration or npm run start ./relative/path/from/src/to/configuration.

There are examples provided. To run them locally, execute yarn start ../examples/gallery-example or npm run start ../examples/gallery-example.

image credits

Thanks to my lovely wife Norah @ Fox & Folk for the images for the examples.

Contributing

clone, install, tinker, submit pr. Thanks!