@zohodesk/dot/es/DotProvider/DotProvider.js

In this Library, we Provide Some Basic Components to Build Your Application

import React, { useRef, useCallback, forwardRef } from "react";
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import useDotProvider from "./hooks/useDotProvider";
const DotProvider = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    tag: Element = 'div',
    themeAppearance,
    themeColor,
    baseZoomUnit,
    baseFontUnit,
    zoomUnitVariable,
    fontUnitVariable,
    themeAppearanceAttr,
    themeColorAttr,
    providerRef,
    onAssetsDownloadSuccess,
    getAssetsPromises,
    children,
    ...rest
  } = props;
  const wrapperElementRef = useRef(null);
  const getProviderElement = useCallback(() => {
    if (typeof providerRef === 'function') {
      return providerRef();
    } else if (Element !== React.Fragment) {
      return wrapperElementRef.current;
    } else {
      return document.documentElement;
    }
  }, [providerRef, Element]);
  const getEleRef = useCallback(ele => {
    wrapperElementRef.current = ele;

    if (ref && typeof ref === 'function') {
      ref(ele);
    } else if (ref && typeof ref === 'object') {
      ref.current = ele;
    }
  }, [ref]);
  useDotProvider({
    themeAppearance: themeAppearance,
    themeColor: themeColor,
    themeAppearanceAttr: themeAppearanceAttr,
    themeColorAttr: themeColorAttr,
    baseZoomUnit: baseZoomUnit,
    baseFontUnit: baseFontUnit,
    zoomUnitVariable: zoomUnitVariable,
    fontUnitVariable: fontUnitVariable,
    getProviderElement,
    onAssetsDownloadSuccess: onAssetsDownloadSuccess,
    getAssetsPromises: getAssetsPromises
  });
  return /*#__PURE__*/React.createElement(Element, { ...rest,
    ref: getEleRef
  }, children);
});
DotProvider.propTypes = propTypes;
DotProvider.defaultProps = defaultProps;
export default DotProvider;