yet-another-react-lightbox 1.3.3 → 1.3.6

package/README.md

@@ -1,6 +1,6 @@
 # Yet Another React Lightbox
 
-Modern React lightbox component.
+Modern React lightbox component. Performant, easy to use, customizable and extendable.
 
 ## Overview
 
@@ -8,9 +8,23 @@ Modern React lightbox component.
 [![Bundle Size](https://img.shields.io/bundlephobia/minzip/yet-another-react-lightbox?color=blue)](https://bundlephobia.com/package/yet-another-react-lightbox)
 [![License MIT](https://img.shields.io/npm/l/yet-another-react-lightbox?color=blue)](LICENSE)
 
+- **Built for React:** works with React 18, 17 and 16.8.0+
+- **UX:** supports keyboard, mouse, touchpad and touchscreen navigation
+- **Preloading:** never displays partially downloaded images
+- **Performance:** preloads limited number of images without compromising performance or UX
+- **Responsive:** responsive images with automatic resolution switching are supported out of the box
+- **Video:** video slides are supported via an optional plugin
+- **Customization:** customize any UI element or add your own custom slides
+- **No bloat:** never bundle rarely used features; add optional features via plugins 
+- **TypeScript:** type definitions come built-in in the package
+
 ## Documentation
 
-[https://yet-another-react-lightbox.vercel.app/](https://yet-another-react-lightbox.vercel.app/)
+[https://yet-another-react-lightbox.vercel.app/documentation](https://yet-another-react-lightbox.vercel.app/documentation)
+
+## Examples
+
+[https://yet-another-react-lightbox.vercel.app/examples](https://yet-another-react-lightbox.vercel.app/examples)
 
 ## Installation
 

package/dist/plugins/Fullscreen.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { LightboxProps, Plugin, Render } from "../types.js";
 declare module "../types.js" {
     interface LightboxProps {
-        /** enter fullscreen mode automatically when the lightbox opens */
+        /** if `true`, enter fullscreen mode automatically when the lightbox opens */
         fullscreen?: boolean;
     }
     interface Render {

package/dist/plugins/Inline.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Component, Plugin } from "../types.js";
 declare module "../types.js" {
     interface LightboxProps {
-        /** HTML div element attributes to be passed to inline plugin container */
+        /** HTML div element attributes to be passed to the inline plugin container */
         inline?: React.HTMLAttributes<HTMLDivElement>;
     }
 }

package/dist/plugins/Video.d.ts

@@ -6,11 +6,11 @@ export interface SlideVideo {
     type: "video";
     /** video placeholder image */
     poster?: string;
-    /** video width */
+    /** video width in pixels */
     width?: number;
-    /** video height */
+    /** video height in pixels */
     height?: number;
-    /** vide source files */
+    /** an array of video files */
     sources?: {
         /** video source URL */
         src: string;

package/dist/types.d.ts

@@ -8,7 +8,7 @@ export interface SlideImage {
     alt?: string;
     /** image aspect ratio */
     aspectRatio?: number;
-    /** alternative images to be passed to 'srcSet' */
+    /** alternative images to be passed to the 'srcSet' */
     srcSet?: {
         /** image URL */
         src: string;
@@ -110,6 +110,15 @@ export interface LightboxProps {
     /** lifecycle callbacks */
     on: Callbacks;
 }
+export declare const ImageSlidePropTypes: PropTypes.Requireable<PropTypes.InferProps<{
+    src: PropTypes.Requireable<string>;
+    alt: PropTypes.Requireable<string>;
+    aspectRatio: PropTypes.Requireable<number>;
+    srcSet: PropTypes.Requireable<PropTypes.InferProps<{
+        src: PropTypes.Validator<string>;
+        width: PropTypes.Validator<number>;
+    }>[]>;
+}>>;
 export declare const SlideTypesPropTypes: PropTypes.Validator<any>[];
 export declare const LightboxPropTypes: {
     open: PropTypes.Validator<boolean>;

package/dist/types.js

@@ -1,18 +1,14 @@
 import PropTypes from "prop-types";
-export const SlideTypesPropTypes = [
-    PropTypes.shape({
+export const ImageSlidePropTypes = PropTypes.shape({
+    src: PropTypes.string,
+    alt: PropTypes.string,
+    aspectRatio: PropTypes.number,
+    srcSet: PropTypes.arrayOf(PropTypes.shape({
         src: PropTypes.string.isRequired,
-        title: PropTypes.string,
-        aspectRatio: PropTypes.number,
-        srcSet: PropTypes.oneOfType([
-            PropTypes.string.isRequired,
-            PropTypes.arrayOf(PropTypes.shape({
-                src: PropTypes.string.isRequired,
-                width: PropTypes.number.isRequired,
-            }).isRequired).isRequired,
-        ]),
-    }),
-];
+        width: PropTypes.number.isRequired,
+    }).isRequired),
+});
+export const SlideTypesPropTypes = [ImageSlidePropTypes];
 export const LightboxPropTypes = {
     open: PropTypes.bool.isRequired,
     close: PropTypes.func.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.3.3",
+    "version": "1.3.6",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -80,7 +80,7 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^14.2.0",
-        "@types/jest": "^27.5.1",
+        "@types/jest": "^27.5.2",
         "@types/react": "^18.0.10",
         "@types/react-dom": "^18.0.5",
         "@typescript-eslint/eslint-plugin": "^5.27.0",