Integration
JavaScript frameworks
Fancyapps UI components are written using plain JavaScript without third-party libraries and will not negatively impact server-side rendering.
There are currently no official wrappers for JavaScript frameworks, but creating one is fairly easy. See examples of how they all follow the same logic.
If you're having trouble with TypeScript types, try this snippet:
js
import type { Fancybox as FancyboxType } from "@fancyapps/ui/types";
import * as Fancyapps from "@fancyapps/ui";
const Fancybox: typeof FancyboxType = Fancyapps.Fancybox;
React
An example of a Fancybox React wrapper.
js
import React, { useRef, useEffect } from "react";
import { Fancybox as NativeFancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";
function Fancybox(props) {
const containerRef = useRef(null);
useEffect(() => {
const container = containerRef.current;
const delegate = props.delegate || "[data-fancybox]";
const options = props.options || {};
NativeFancybox.bind(container, delegate, options);
return () => {
NativeFancybox.unbind(container);
NativeFancybox.close();
};
});
return <div ref={containerRef}>{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
CodeSandbox Example (TypeScript)
Vue
An example of a Fancybox Vue wrapper.
js
<script>
import { Fancybox } from "@fancyapps/ui";
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>
Angular
An example of Fancybox integration in an Angular component.
js
import { Component, ElementRef } from '@angular/core';
import { Fancybox } from '@fancyapps/ui';
@Component({
selector: 'app-gallery',
templateUrl: './gallery.component.html',
styleUrls: ['./gallery.component.css'],
})
export class GalleryComponent {
constructor(private elRef: ElementRef) {}
ngOnInit() {
Fancybox.bind(this.elRef.nativeElement, '[data-fancybox]', {
// Custom options
});
}
ngOnDestroy() {
Fancybox.unbind(this.elRef.nativeElement);
Fancybox.close();
}
}