RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://yet-another-react-lightbox.com/documentation below:

Website Navigation

Documentation | Yet Another React Lightbox

Documentation

Yet Another React Lightbox allows you to add a lightbox component to your React project in minutes. To get started, follow the Installation and Minimal Setup Example guides, or feel free to explore the collection of StackBlitz demos.

Yet Another React Lightbox provides all components and types as named exports. Lightbox is exported as both default and named export.

The below documentation covers Yet Another React Lightbox API. For advanced features, please see the Advanced API documentation.

Parameters marked with an asterisk () are required.

Styles

Yet Another React Lightbox comes with CSS stylesheet that needs to be imported once in your project. All examples across this site include CSS import, but you can omit the import statement if you already imported lightbox styles in your application.

import "yet-another-react-lightbox/styles.css";

Lightbox Property Type Description open boolean

If true, the lightbox is open.

close () => void A callback to close the lightbox. index number

Slide index.

The lightbox reads this property when it opens (in this case the index prop determines the starting slide index) and when either slides or index props change (in this case the index prop determines the current slide index). In most cases, you do not need to provide this prop at all, as the lightbox maintains its state internally. However, you may need to provide the index prop when you modify or completely replace the slides array. To keep track of the current slide index, you can use the on.view callback (see Tracking Slide Index example).

Default value: 0

slides Slide[]

Slides to display in the lightbox. See Slide for details.

Please note that updating the slides array (or just changing the array reference) forces the lightbox to update its state based on the current slides and index values. You can safely use a non-stable array reference (i.e., slides={[{ ... }]} or slides={items.map((item) => ({ ... }))}) as long as the component holding the lightbox does not re-rerender while the lightbox is open. However, if your component may re-render, be sure to either provide the slides prop as a stable array reference (i.e., const in static scope, or wrapped with React.useState or React.useMemo), or specify the current slide index in the index prop (see Tracking Slide Index example).

Default value: []

render Render

Custom render functions. See

Render

for details.

plugins Plugin[]

Enabled plugins.

Example: plugins={[Fullscreen, Video]}

labels object

Custom UI labels / translations.

Example: labels={{ Next: "Next slide" }}

toolbar

{
buttons: (React.ReactNode | "close")[];
}

Toolbar settings.

buttons - buttons to render in the toolbar

Default value: { buttons: ["close"] }

carousel

{
  finite?: boolean;
  preload?: number;
  padding?: `${number}px` | `${number}%` | number;
  spacing?: `${number}px` | `${number}%` | number;
  imageFit?: "contain" | "cover"
  imageProps?: React.ImgHTMLAttributes<HTMLImageElement>
}

Carousel settings.

finite - if true, the lightbox carousel doesn't wrap around
preload - the lightbox preloads (2 * preload + 1) slides
padding - padding around each slide
spacing - spacing between slides
imageFit - object-fit setting for image slides
imageProps - custom image attributes

Default value: { finite: false, preload: 2, padding: "16px", spacing: "30%", imageFit: "contain" }

animation

{
  fade?: number;
  swipe?: number;
  navigation?: number;
  easing?: {
    fade?: string;
    swipe?: string;
    navigation?: string;
  }
}

Animation settings.

fade - fade-in / fade-out animation duration
swipe - swipe animation duration
navigation - override for swipe animation duration when using keyboard navigation or navigation buttons
easing - animation timing function settings
- fade - fade-in / fade-out animation timing function
- swipe - slide swipe animation timing function
- navigation - slide navigation animation timing function (when using keyboard navigation or navigation buttons)

Default value: { fade: 250, swipe: 500, easing: { fade: "ease", swipe: "ease-out", navigation: "ease-in-out" } }

controller

{
  ref?: React.ForwardedRef<ControllerRef>;
  focus?: boolean;
  aria?: boolean;
  touchAction?: "none" | "pan-y";
  closeOnPullUp?: boolean;
  closeOnPullDown?: boolean;
  closeOnBackdropClick?: boolean;
  disableSwipeNavigation?: boolean;
}

Controller settings.

ref - lightbox controller ref (see Controller Ref for details)
focus - deprecated, for internal use only
aria - if true, set ARIA attributes on the controller div
touchAction - deprecated, for internal use only
closeOnPullUp - if true, close the lightbox on pull-up gesture
closeOnPullDown - if true, close the lightbox on pull-down gesture
closeOnBackdropClick - if true, close the lightbox when the backdrop is clicked
disableSwipeNavigation - if true, disable slide change on pointer swipe / drag

Default value: { ref: null, focus: true, aria: false, touchAction: "none" }

portal

{
root?: DocumentFragment | Element | null;
}

Portal settings.

root - custom portal mount point. By default, the portal is mounted as a child of the document body.

noScroll

{
disabled?: boolean;
}

NoScroll module settings.

The NoScroll module is responsible for hiding the vertical scrollbar and preventing document <body/> from scrolling underneath the lightbox. However, in some cases, this functionality may cause undesired side effects, so you may want to disable this feature.

disabled - if true, the NoScroll module functionality is disabled

Additionally, the NoScroll module adds extra padding to the fixed-positioned elements to avoid visual layout shifts. The primary use case for this feature is a fixed-position page header / appbar. However, if this behavior causes undesired side effects, you can deactivate it for specific elements by marking them with the yarl__no_scroll_padding CSS class.

{
  view?: ({ index }: { index: number }) => void;
  click?: ({ index }: { index: number }) => void;
  entering?: () => void;
  entered?: () => void;
  exiting?: () => void;
  exited?: () => void;
}

Lifecycle callbacks.

view - a callback called when a slide becomes active
click - a callback called when a slide is clicked
entering - a callback called when the portal starts opening
entered - a callback called when the portal opens
exiting - a callback called when the portal starts closing
exited - a callback called when the portal closes

styles

{
  root?: CSSProperties;
  container?: CSSProperties;
  slide?: CSSProperties;
  button?: CSSProperties;
  icon?: CSSProperties;
}

Customization styles.

root - lightbox root customization slot
container - lightbox container customization slot
slide - lightbox slide customization slot
button - lightbox button customization slot
icon - lightbox icon customization slot

Note that some plugins extend this list with their own customization slots.

className string CSS class of the lightbox root element Slide

Image slides are supported by default. Additional slide types can be added via plugins or custom render function. Please see Custom Slides example for details.

Property Type Description type "image" Image slide type src string Image URL alt string

Image alt attribute

width number Image width in pixels height number Image height in pixels imageFit "contain" | "cover"

Image object-fit setting

srcSet

{
  src: string;
  width: number;
  height: number;
}[]

Alternative images to be included in the srcset

As a bare minimum, you need to provide src attribute for each image slide.

const slides = [
  { src: "/image1.jpg" },
  { src: "/image2.jpg" },
  { src: "/image3.jpg" },
  // ...
];

However, the recommended configuration is to provide multiple files of different resolution for each slide. Yet Another React Lightbox uses all supplied images to populate srcset and sizes attributes on the fly. Please note that width and height attributes are required in this case.

const slides = [
  {
    src: "/image1x3840.jpg",
    alt: "image 1",
    width: 3840,
    height: 2560,
    srcSet: [
      { src: "/image1x320.jpg", width: 320, height: 213 },
      { src: "/image1x640.jpg", width: 640, height: 427 },
      { src: "/image1x1200.jpg", width: 1200, height: 800 },
      { src: "/image1x2048.jpg", width: 2048, height: 1365 },
      { src: "/image1x3840.jpg", width: 3840, height: 2560 },
    ],
  },
  // ...
];

Yet Another React Lightbox is optimized to preload and display only a limited number of slides at a time, so there are no performance penalties or UX impact in supplying a large number of slides.

Render

Custom render functions can be passed via render prop.

// render function usage example

<Lightbox
  render={{
    slide: ({ slide, offset, rect }) => {
      // ...
    },
  }}
  // ...
/>

Property Type Description slide

({ slide, offset, rect }: { slide: Slide; offset: number; rect: ContainerRect }) => React.ReactNode

Render custom slide type, or override the default image slide. slideHeader

({ slide }: { slide: Slide }) => React.ReactNode

Render custom slide elements into the DOM right before the slide. Use absolute or fixed positioning. slideFooter

({ slide }: { slide: Slide }) => React.ReactNode

Render custom slide elements into the DOM right after the slide. Use absolute or fixed positioning. slideContainer

({ slide, children }: { slide: Slide; children: React.ReactNode }) => React.ReactNode

Render custom slide container. controls () => React.ReactNode Render custom controls or additional elements in the lightbox. Use absolute or fixed positioning. iconPrev () => React.ReactNode Render custom Prev icon. iconNext () => React.ReactNode Render custom Next icon. iconClose () => React.ReactNode Render custom Close icon. iconLoading () => React.ReactNode Render custom Loading icon. iconError () => React.ReactNode Render custom Error icon. buttonPrev () => React.ReactNode

Render custom Prev button. Return null if you want to hide the button.

buttonNext () => React.ReactNode

Render custom Prev button. Return null if you want to hide the button.

buttonClose () => React.ReactNode Render custom Close button. Controller Ref

Controller ref provides external controls for the lightbox.

// Controller ref usage example

const ref = React.useRef(null);

// ...

return (
  <Lightbox
    controller={{ ref }}
    on={{ click: () => ref.current?.close() }}
    // ...
  />
);

Property Type Description prev ({ count }: { count: number }) => void | () => void Navigate to the previous slide. next ({ count }: { count: number }) => void | () => void Navigate to the next slide. close () => void Close the lightbox. focus () => void Transfer focus to the lightbox controller. getLightboxProps () => ComponentProps Get lightbox props (see type definitions for more details). getLightboxState () => LightboxState Get lightbox state (see type definitions for more details). Tracking Slide Index

While the lightbox maintains the slide index state internally, some use cases may require you to keep track of the slide index in a local state variable. You can easily accomplish this using the following approach:

const [index, setIndex] = React.useState(0);

// ...

return (
  <Lightbox
    index={index}
    on={{ view: ({ index: currentIndex }) => setIndex(currentIndex) }}
    // ...
  />
);

RTL

The library supports RTL out of the box. To enable RTL mode, ensure the <html> tag has the dir="rtl" attribute.

<html lang="fa" dir="rtl">
  <!-- ... -->
</html>

«IntroductionCustomization»

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4