I have a SkeletonTile component with an animation where the animation delay can be specified via a passed property.
Example:
type Props = {
delay?: number;
width?: string;
height?: string;
};
const SkeletonTile: React.FC<Props> = ({ delay, width, height }) => {
return <div style={{ animationDelay: `${delay}s`, width, height }} className="skeleton-tile"></div>;
}
Now, I thought about having a SkeletonController component which can take multiple SkeletonTile components as children. The SkeletonController would then distribute the delay values to the child components with increasing delays per child.
Example:
<SkeletonController delayIncrease={0.2}>
<SkeletonTile width="20em" height="20em" />
<div className="flex">
<SkeletonTile width="40em" height="20em" />
<SkeletonTile width="10em" height="20em" />
</div>
</SkeletonController>
So the first SkeletonTile would have the delay property set to 0, the second one to 0.2 and the third one to 0.4.
I've already tried using the Children.map functionality to alter the property values. This is not possible though because property values of components are immutable.
Sure I could use some sort of helper function which creates an array of JSX elements, but then I would lose the option to set different other properties (width, height) on the children.
Do you have any Idea how this approach would be possible? Thank you for your help in advance.
You can pass an array of properties to use to create tiles into your controller component:
export type TileProps = {
delay?: number;
width?: string;
height?: string;
};
const SkeletonTile: React.FC<TileProps> = ({ delay, width, height }) => {
return <div style={{ animationDelay: `${delay}s`, width, height }} className="skeleton-tile"></div>;
}
type SkeletonProps = {
tiles: TileProps[];
delayIncrease: number;
};
const SkeletonController: React.FC<SkeletonProps> = ({ tiles, delayIncrease }) => {
return tiles.map((tile, index) => (<Tile width={tile.width} height={tile.height} delay={index * delayIncrease} />));
}
You can then use your skeleton component like this:
const tiles: TileProps[] = [
{ height: '2em', width: '2em' },
{ height: '2em', width: '2em' },
{ height: '2em', width: '2em' },
];
<SkeletonController delayIncrease={0.2} tiles={tiles} />