html-squircle/dist/esm/react/Squircle.js

Utilities for generating superellipse squircles in the form of SVG strings, to be used in clip-path and background inline styles.

import { jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import { isFunction } from "../utils/isFunction.js";
import { useSquircle } from "./useSquircle.js";
/**
 * Polymorphic Squircle component for rendering a squircle where the size is
 * observed from the DOM element to which it is applied.
 *
 * @param as The name of a primitive element.
 * @param squircle (optional) The options to pass to the squircle computation
 *   function. You can prevent extra re-renders by passing a memoized value.
 */
export const Squircle = ({
  as: Element,
  ref,
  squircle,
  style,
  children,
  ...restProps
}) => {
  // Create our own object-style ref so that we can observe the size
  const refObject = React.useRef(null);
  // Merge the (possibly-) provided ref and the above one
  const mergedRef = instance => {
    // Assign our object-style ref
    refObject.current = instance;
    // Run their callback-style ref and return its cleanup
    if (isFunction(ref)) {
      // @ts-expect-error The union is too complex
      return ref(instance);
    }
    // Assign their object-style ref
    if (ref) {
      // @ts-expect-error The union is too complex
      ref.current = instance;
    }
  };
  // @ts-expect-error The union is too complex
  const squircleStyle = useSquircle(refObject, squircle);
  return (
    // @ts-expect-error Too much complexity
    _jsx(Element
    // @ts-expect-error Too much complexity
    , {
      // @ts-expect-error Too much complexity
      ref: mergedRef,
      style: {
        ...style,
        ...squircleStyle
      },
      ...restProps,
      children: children
    })
  );
};