Skip to main content

React

Fancybox is written using plain JavaScript with no third party libraries. There is currently no official wrapper for React, but it's quite easy to create one. What is great, Fancybox will not negatively impact server side renders.

Example of a React function component that uses hooks:

import React, { useEffect } from "react";
import NativeFancybox from "/static/lib/[email protected]/fancybox.esm.js";import "/static/lib/[email protected]/fancybox.css";
function Fancybox(props) {  const delegate = props.delegate || "[data-fancybox]";
  useEffect(() => {    NativeFancybox.assign(delegate, props.options || {});
    return () => {      NativeFancybox.trash(delegate);
      NativeFancybox.close(true);    };  }, []);
  return <>{props.children}</>;}
export default Fancybox;

Usage example:

<Fancybox options={{ infinite: false }}>  <p>    <button      data-fancybox="gallery"      data-src="https://lipsum.app/id/1/800x600"      className="button button--secondary"    >      Image #1    </button>
    <button      data-fancybox="gallery"      data-src="https://lipsum.app/id/2/800x600"      className="button button--secondary"    >      Image #2    </button>  </p></Fancybox>

Result: