React implements a general skeleton screen component example

What is a skeleton screen?

The comrades who have found this place have more or less knowledge about skeleton screens. Please allow me to say a few words first. Skeleton Screen is a solution to optimize users' weak network experience and can effectively alleviate users' anxiety while waiting.

Demo

Let’s take a look at a demo first to get a rough idea of ​​the final product and how to use it.

npm install obiusm-react-components

import { Skeleton } from 'obiusm-react-components';

  <Skeleton isVisible={true}>
    <div className="wrapper">
      <div className="content1"></div>
      <div data-skeleton-ignore={true}>123456</div>
      <div className="content2"></div>
      <div className="content3" data-skeleton-style={{ width: '50%' }}></div>
    </div>
  </Skeleton>

Just wrap a layer around the component you wrote to decide whether it is displayed.

Design ideas

The skeleton allows users to perceive the real content before it is loaded, which can improve the user experience. If we have to customize the skeleton for each component we write, it will be quite cumbersome.

Thanks to the data transmission method of React props, we can easily get the entire ReactElement tree in props. Then we just need to recursively traverse the tree to imitate its structure and copy its class to automatically generate the skeleton.

But in actual use, we may only need the structure of the first few layers without simulating the structure of the entire tree. It is also possible that the automatically generated style is too ugly and we need to customize its node style. It is also possible that we do not need to pay attention to some floating layer content or want to ignore a certain node.

So we probably need to implement the following functions

• Setting the recursion depth
• Provides a method to ignore nodes
• Provides methods for customizing skeleton node styles

Specific implementation

First, define a component function to decide whether to render the skeleton screen or the real element

function Skeleton(props: Props) {
  if (!props) {
    return <div />;
  }
  if (props.isVisible) {
    return createModal(props.children, props.depth || 4, 0);
  } else {
    return props.children ? props.children : <div />;
  }
}

createModal recursively traverses the div wrapped under the Skeleton. Each time it recurses, it adds current to 1 and passes it down. In this way, we can determine how many layers of recursion have been made and whether data-skeleton-ignore on each node has data-skeleton-style, so as to handle it specially.

const createModal = (child: ReactElement, depth: number, current: number) => {
  if (
    depth === current ||
    (child && child.props && child.props['data-skeleton-ignore'])
  ) {
    return;
  }
  if (
    child &&
    child.props &&
    child.props.children &&
    Array.isArray(child.props.children) &&
    current < depth - 1
  ) {
    return (
      <div
        className={`${
          child.props.className !== undefined ? child.props.className : ''
        } ${'react-skeleton'}`}
        style={
          child.props && child.props['data-skeleton-style']
            ? child.props['data-skeleton-style']
            : {}
        }
        key={Math.random() * 1000}
      >
        {child.props.children && child.props.children.length > 0
          ? child.props.children.map((child: any) => {
              return createModal(child, depth, current + 1);
            })
          : '*'}
      </div>
    );
  } else {
    return (
      <div
        className={`${
          child.props && child.props.className ? child.props.className : ''
        } ${'react-skeleton2'}`}
        style={
          child.props && child.props['data-skeleton-style']
            ? child.props['data-skeleton-style']
            : {}
        }
        key={Math.random() * 1000}
      >
        *
      </div>
    );
  }
};

Complete code and usage documentation

Complete code obiusm-react-components

Documentation https://magic-zhu.github.io/obiusm-react-components-docs/components/skeleton/

This is the end of this article about implementing a general skeleton screen component example with React. For more relevant React skeleton screen content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!