@zohodesk/a11y/es/CustomCursor/CustomCursor.js

In this Package, We Provide Some Basic Components For Accessibility.

import React, { useEffect, useState } from 'react';
import propTypes from "./props/propTypes";
import defaultProps from "./props/defaultProps";
import { svgCollection, cursorSizeData } from './constants';
export default function CustomCursor(props) {
  const {
    isActive,
    size,
    variant,
    prefix
  } = props;
  let [cursorStyle, setCursorStyle] = useState('');
  useEffect(() => {
    const style = {};
    Object.entries(svgCollection).forEach(_ref => {
      let [key, svg] = _ref;

      if (isActive) {
        const innerColor = variant == 'black' ? '#fff' : '#000';
        const outerColor = variant == 'black' ? '#000' : '#fff';
        const {
          height,
          width,
          Xaxis,
          Yaxis
        } = cursorSizeData[key][size];
        svg = svg.replaceAll('cursorHeightSize', `${height}`).replaceAll('cursorWidthSize', `${width}`);
        svg = svg.replaceAll('innerColor', `${innerColor}`).replaceAll('outerColor', `${outerColor}`);
        let base64EncodedSvg = btoa(svg);
        const dataUri = `'data:image/svg+xml;base64,${base64EncodedSvg}'`;
        style[`--${prefix}-${key}`] = `url(${dataUri}) ${Xaxis} ${Yaxis} , ${key}`;
      } else {
        style[`--${prefix}-${key}`] = key;
      }
    });
    let converted = JSON.stringify(style, null, 2).replaceAll('",', '";').replaceAll('"', '');
    setCursorStyle(`.${prefix}-custom ${converted}`);
  }, [size, variant, prefix, isActive]);
  return /*#__PURE__*/React.createElement("style", null, cursorStyle);
}
CustomCursor.propTypes = propTypes;
CustomCursor.defaultProps = defaultProps;