leumas-universal-crud-react/src/Generators/BarcodeGenerator.jsx

Leumas Universal CRUD to a dynamic Endpoint, Setup your own Dynamic Endpoint and Use Leumas API to send to your MONGO clusters

// BarcodeGenerator.jsx
import React, { useEffect, useRef } from 'react';
import useAuthUser from 'react-auth-kit/hooks/useAuthUser';
import { generateBarcode } from './Helpers/generateBarcode';

function BarcodeGenerator({ name, id, onChange }) {
    const canvasRef = useRef(null);
    const authUser = useAuthUser(); // Hook to get the authenticated user

    useEffect(() => {
        let barcodeValue = id;

        if (!barcodeValue) {
            const user = authUser;
            if (user && user.user?._id) {
                barcodeValue = user.user._id;
            } else {
                console.error('No ID provided and unable to retrieve user ID');
                return;
            }
        }

        onChange({ target: { name, value: barcodeValue } });

        // Use the generateBarcode function
        generateBarcode(canvasRef, barcodeValue);
    }, [id, name]);

    return (
        <>
            <h3><strong>Your Unique Barcode</strong></h3>
            <div className="max-w-full overflow-hidden flex items-center justify-center">
                <canvas ref={canvasRef} style={{ maxWidth: '100%' }}></canvas>
                <input type="hidden" name={name} value={id || ''} />
            </div>
        </>
    );
}

export default BarcodeGenerator;