30 lines
621 B
TypeScript
30 lines
621 B
TypeScript
import * as React from "react";
|
|
import useComponentSize from "@shared/editor/components/hooks/useComponentSize";
|
|
|
|
export const MeasuredContainer = <T extends React.ElementType>({
|
|
as: As,
|
|
name,
|
|
children,
|
|
...rest
|
|
}: {
|
|
as: T;
|
|
name: string;
|
|
children?: React.ReactNode;
|
|
} & React.ComponentProps<T>) => {
|
|
const ref = React.useRef<HTMLElement>(null);
|
|
const rect = useComponentSize(ref.current);
|
|
|
|
return (
|
|
<As
|
|
{...rest}
|
|
ref={ref}
|
|
style={{
|
|
[`--${name}-width`]: `${rect.width}px`,
|
|
[`--${name}-height`]: `${rect.height}px`,
|
|
}}
|
|
>
|
|
{children}
|
|
</As>
|
|
);
|
|
};
|