Fancyapps
On this page

Integration

JavaScript frameworks

Fancyapps UI components are written using plain JavaScript without third-party libraries. There are currently no official wrappers for JavaScript frameworks, but creating one is fairly easy. What's great is that Fancyapps UI components will not negatively impact server-side rendering.

React

An example of a Fancybox React wrapper.

js
import React, { useRef, useEffect } from "react";

import { Fancybox as NativeFancybox } from "@fancyapps/ui/dist/fancybox/fancybox.esm.js";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

function Fancybox(props) {
  const container = useRef(null);

  useEffect(() => {
    const delegate = props.delegate || "[data-fancybox]";
    const options = props.options || {};

    NativeFancybox.bind(container.current, delegate, options);

    return () => {
      NativeFancybox.unbind(container.current);
      NativeFancybox.close();
    };
  });

  return <div ref={container}>{props.children}</div>;
}

export default Fancybox;

Usage example:

jsx
<Fancybox
  options={{
    Carousel: {
      infinite: false,
    },
  }}
>
  <a data-fancybox="gallery" href="https://lipsum.app/id/60/1600x1200">
    <img src="https://lipsum.app/id/60/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/61/1600x1200">
    <img src="https://lipsum.app/id/61/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/62/1600x1200">
    <img src="https://lipsum.app/id/62/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/63/1600x1200">
    <img src="https://lipsum.app/id/63/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/64/1600x1200">
    <img src="https://lipsum.app/id/64/200x150" width="200" height="150" />
  </a>
</Fancybox>

Stackblitz Example

Vue

An example of a Fancybox Vue wrapper.

js
<script>
import { Fancybox } from '@fancyapps/ui/dist/fancybox/fancybox.esm.js';
import '@fancyapps/ui/dist/fancybox/fancybox.css';

export default {
  props: {
    options: Object,
  },
  mounted() {
    Fancybox.bind(this.$refs.container, '[data-fancybox]', {
      ...(this.options || {}),
    });
  },
  updated() {
    Fancybox.unbind(this.$refs.container);
    Fancybox.close();

    Fancybox.bind(this.$refs.container, '[data-fancybox]', {
      ...(this.options || {}),
    });
  },
  unmounted() {
    Fancybox.destroy();
  },
};
</script>

<template>
  <div ref="container">
    <slot></slot>
  </div>
</template>

<style></style>

Usage example:

js
<Fancybox
  :options="{
    Carousel: {
      infinite: false,
    },
  }"
>
  <a data-fancybox="gallery" href="https://lipsum.app/id/60/1600x1200">
    <img src="https://lipsum.app/id/60/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/61/1600x1200">
    <img src="https://lipsum.app/id/61/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/62/1600x1200">
    <img src="https://lipsum.app/id/62/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/63/1600x1200">
    <img src="https://lipsum.app/id/63/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/64/1600x1200">
    <img src="https://lipsum.app/id/64/200x150" width="200" height="150" />
  </a>
</Fancybox>

Stackblitz Example