leumas-private-shared/src/Generators/BarcodeGenerator.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

// 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;