in

Which is the best way to create a reusable skeleton component?


I’m using the react-loading-skeleton and I’m trying to create a reusable component on top of the <Skeleton /> component of this library.

The reason that I’m trying to create something like this is because I don’t like the approach of react-loading-skeleton, which is something like this:

<div>
    <h1>{props.title || <Skeleton />}</h1>
    {props.body || <Skeleton count={10} />}
</div>

I think the could would get hard to understand and repetitive.

My idea is to create a custom JSX component that has the following props:

  1. Component – To render the component when the skeleton is not needed
  2. condition – To check if it should render the component or the skeleton
  3. skeletonCount – just a prop of the skeleton library
  4. …props – to receive all the additionals props that Component may have.

I wanna know if this is a good approach because I was getting some typescript errors related to …props.

This is the component:

import React from 'react';
import Skeleton from 'react-loading-skeleton';
import type { SkeletonProps } from './types';

export const SkeletonHandler: React.FC<SkeletonProps> = ({
  Component,
  condition,
  skeletonCount,
  ...props
}) => {
  return condition ? (
    <Component {...props} />
  ) : (
    <Skeleton count={skeletonCount} />
  );
};

Usage:

<SkeletonHandler Component={TierTitle} variant="h4" color="black" bold>
  {clientName}
</SkeletonHandler>

PS: variant, color, bold and client name are all values that were in the component.

Please, let me know if there is a better way of solving this problem.



Source: https://stackoverflow.com/questions/70602426/which-is-the-best-way-to-create-a-reusable-skeleton-component

Simple CRUD API written in Go, built using AWS SAM tool and using the AWS’ infrastructure

Multi-Modal Machine Learning toolkit based on PyTorch