Untitled

import React, { useEffect, useRef, useState } from "react";
import dynamic from 'next/dynamic';
import "qr-code-styling/dist/qr-code-styling.css";

const QRCodeStyling = dynamic(() => import("qr-code-styling"), {
  ssr: false,
});

export default function App() {
  const [options, setOptions] = useState({
    // ... your options
  });
  const [fileExt, setFileExt] = useState("svg");
  const [qrCode, setQRCode] = useState(null);
  const ref = useRef(null);

  useEffect(() => {
    const qrCodeInstance = new QRCodeStyling(options);
    setQRCode(qrCodeInstance);

    return () => {
      qrCodeInstance?.clear();
    };
  }, [options]);

  useEffect(() => {
    if (qrCode && ref.current) {
      qrCode.append(ref.current);
    }
  }, [qrCode]);

  useEffect(() => {
    if (qrCode) {
      qrCode.update(options);
    }
  }, [qrCode, options]);

  const onDataChange = (event) => {
    setOptions((options) => ({
      ...options,
      data: event.target.value,
    }));
  };

  const onExtensionChange = (event) => {
    setFileExt(event.target.value);
  };

  const onDownloadClick = () => {
    if (qrCode) {
      qrCode.download({
        extension: fileExt,
      });
    }
  };

  return (
    <div className="flex flex-col items-center">
      <h2>QR code styling for React</h2>
      <div ref={ref} />
      <div style={styles.inputWrapper}>
        <input value={options.data} onChange={onDataChange} style={styles.inputBox} />
        <select onChange={onExtensionChange} value={fileExt}>
          <option value="svg">SVG</option>
          <option value="png">PNG</option>
          <option value="jpeg">JPEG</option>
          <option value="webp">WEBP</option>
        </select>
        <button onClick={onDownloadClick}>Download</button>
      </div>
    </div>
  );
}

const styles = {
  inputWrapper: {
    margin: "20px 0",
    display: "flex",
    justifyContent: "space-between",
    width: "100%",
    maxWidth: "300px",
  },
  inputBox: {
    flexGrow: 1,
    marginRight: 20,
  },
};