React Ajax-Lightbox

Diese React-Komponente ermöglicht die Anzeige von via Ajax geladenen Inhalten in einer Lightbox.

Instalation

$ npm install --save @boewa-software/react-ajax-lightbox

Nutzung

Die Nutzung erfolgt als klassische React-Komponente.

Attribute

• sourcePath : string

  URL zum asynchronen laden des Inhalts.

• closeHandler : function

  Callback-Methode zum Entfernen der Lightbox.

• loaderComponent : function|React.Component

  React-Komponente die beim Laden angezeigt werden soll.

• handleRequestSuccess : function (optional)

  Callback-Methode zur verarbeiten der Response.

  Parameter:

  • response: Antwort aus der Ajax-Anfrage
  • lightbox: Lightbox-Instanz

  Beispiel-Implementierung:

  const handleRequestSuccess = (response, lightbox) => 
      response.content
          ? lightbox.setContent(response.content)
          : lightbox.close();

• handleRequestFailure : function (optional)

  Callback-Methode zur verarbeiten eines Fehlers.

  Parameter:

  • error: Aufgetretener Fehler
  • lightbox: Lightbox-Instanz

  Beispiel-Implementierung:

  const handleRequestFailure = (error, lightbox) => lightbox.close();

• onRenderContent : function (optional)

  Callback-Methode, die nach dem rendern eines neuen Inhalts aufgerufen wird.

  Parameter:

  • contentRef: React-Referenz auf den Content-Container
  • lightbox: Lightbox-Instanz

  Beispiel-Implementierung:

  const onRenderContent = (contentRef, lightbox) => {
      // z.b. Zur Registrierung von Event-Listenern per jQuery
      const contentNode = ReactDOM.findDOMNode(contentRef);
      const $content = $(contentNode);
      
      $content.find('button.close-link').on('click', (e) => {
          e.preventDefault();
          lightbox.close();
      });
  };

• containerClassName : string (optional, default: lightbox--container)

  Class-Attribut des Container-Elements.

• wrapperClassName : string (optional, default: lightbox--wrapper)

  Class-Attribut des Wrapper-Elements.

• bodyClassName : string (optional, default: lightbox-open)

  Class-Attribut des Body-Elements bei einer offenen lightbox.

Direkte Einbindung in den DOM

Die Lightbox kann mit der folgenden Minimal-Konfiguration in den Body eines Dokuments eingefügt werden.

import React from 'react';
import ReactDOM from 'react-dom';
import AjaxLightbox from '@boewa-software/react-ajax-lightbox';

// Ziel-Element für das Einbinden der Lightbox
const targetElement = document.getElementById('target-element');

// Callback-Methode zum entfernen der Lightbox
const closeHandler = () => {
    ReactDOM.unmountComponentAtNode(targetElement);
    targetElement.remove();
};

// Loader-Komponente
const Loader = () => (
    <img className="loader-image" src="path-to-image.svg" alt="Lightbox Loading" />
);

// Komponente rendern
ReactDOM.render(
    <AjaxLightbox sourcePath={'/path/to/load/content'}
                  closeHandler={closeHandler}
                  loaderComponent={Loader}  />,
    targetElement
);

Verknüpfung mit einem Query-Parameter in der Browser-History

Zur Verknüpfung der Lightbox mit der Browser-History via Url-Parameter eignet sich das @boewa-software/url-to-lightbox-connector Modul.