@equinor/fusion-react-utils/dist/esm/hooks/useElementProps.js

Helper and util functions for React

/* eslint-disable @typescript-eslint/no-explicit-any */
import { useLayoutEffect } from 'react';
const reservedReactProperties = new Set(['children', 'localName', 'ref', 'style', 'className']);
/**
 * Extract property names of `custom element`
 * NOTE: does not extract events and functions
 */
export const extractElementProps = (elementClass) => {
    const elementClassProps = new Set();
    for (const p in elementClass.prototype) {
        if (!(p in HTMLElement.prototype)) {
            if (reservedReactProperties.has(p)) {
                console.warn(`${elementClass.name} contains property ${p} which is a React ` +
                    `reserved property. It will be used by React and not set on ` +
                    `the element.`);
            }
            else {
                elementClassProps.add(p);
            }
        }
    }
    return elementClassProps;
};
/**
 * React will try to `toString` all arguments that are provided.
 * This hook will set the property/function to the referenced element programmatically.
 */
export const useElementProps = (ref, props, propMap) => {
    useLayoutEffect(() => {
        const el = ref.current;
        if (el && propMap && props) {
            const elementProps = Object.entries(props).filter(([k]) => propMap.has(k));
            for (const [k, v] of elementProps) {
                el[k] = v;
            }
        }
    }, [ref, propMap, props]);
};
//# sourceMappingURL=useElementProps.js.map