How to use Fancybox in ReactJs?

[voducmanh99]

code exp:

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;

=> I can't import NativeFancybox nor can I find the NativeFancybox module to import in React

[fancyapps]

Hi,

You simply have to adjust file paths. If you have installed @fancyapps/ui package using NPM, then it would be, for example:

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

Quick demo - https://codesandbox.io/s/fancybox-react-demo-9k2kz