@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
34 lines • 1.22 kB
JavaScript
import React, { forwardRef, useMemo } from 'react';
import { BaseSkeleton } from '../../base-skeleton/BaseSkeleton';
import { StyledTextSkeleton } from './TextSkeleton.styles';
const TextSkeleton = /*#__PURE__*/forwardRef(({
className,
baseColor,
highlightColor,
style,
borderRadius,
animationType,
width = '100%',
lines = 1,
randomWithBounds
}, ref) => {
const renderedLines = useMemo(() => Array.from({
length: lines
}).map(() => /*#__PURE__*/React.createElement(BaseSkeleton, {
key: Math.random(),
as: "p",
ref: ref,
width: randomWithBounds ? `${Math.floor(Math.random() * (randomWithBounds[1] - randomWithBounds[0] + 1)) + randomWithBounds[0]}%` : width,
height: 0,
borderRadius: borderRadius,
animationType: animationType,
baseColor: baseColor,
className: className,
style: style,
highlightColor: highlightColor
}, "Pseudo Text")), [animationType, baseColor, borderRadius, className, highlightColor, lines, randomWithBounds, ref, style, width]);
return /*#__PURE__*/React.createElement(StyledTextSkeleton, null, renderedLines);
});
TextSkeleton.displayName = 'Skeleton.Text';
export default TextSkeleton;
//# sourceMappingURL=TextSkeleton.js.map