Installation

yarn add @acctglobal/skeleton
npm install @acctglobal/skeleton

import { Skeleton } from '@acctglobal/skeleton'
import '@acctglobal/skeleton/src/styles/animation.css' // Import if you want to use animation prop

<Skeleton /> // Simple, single-line loading skeleton
<Skeleton count={5} /> // Five-lines loading skeleton
<Skeleton table={ rows: 4, columns: 4 } /> // Four-rows and four-columns loading skeleton table
<Skeleton responsiveImage={{ srcWidth: 1280, srcHeight: 650 }} /> // A fake responsive image with 1280px x 650px originally

Pre-defined classes

The Skeleton can be fully customized from props. But if you want something even more specific, you can use the predefined classes. Are they:

• skeleton-container (the outermost level of skeleton);
• skeleton-wrapper (the wrappers generated from the prop count);
• skeleton-table (the table generated from the prop table);
• skeleton-animation (the div generated from the prop animation).

Props Reference

All props are optional

|Prop|Type|Default|Description| |:---:|:--:|:------:|:---:| |width|number - string||Sets the width of the container/wrapper/table| |height|number - string|1em|Sets the height of the container/wrapper| |margin|number - 'auto'||Sets the margin of container/wrapper/cell table| |padding|number||Sets the padding of container/wrapper| |border|boolean||Activate the border in container/wrapper/cell table| |borderColor|string|#000|Sets the border color| |borderRadius|number||Sets the border radius| |circle|boolean||Sets the border radius in50%| |backgroundColor|string|#ccc|Sets the background color| |color|string|#000|Sets the color of placeholder| |cursor|boolean||Sets the cursor for progress| |placeholder|string||Sets the placeholder in container/wrapper| |placeholderPosition|{horizontal:left-center-right , vertical:top-center-bottom}||Sets the position of placeholder| |animation|boolean||Activate the loading animation| |animationColor|string|#ddd|Sets the loading color animation| |animationDuration|number|3000|Sets the time (ms) for the animation complete a cycle| |count|number||Sets the amount of wrappers that will be render| |responsiveImage|{srcWidth:number , srcHeight:number} - [{srcWidth:number , srcHeight:number , breakIn?:number}]||Sets a responsive image with the defined height and width. It also accepts an array with several images with defined breakpoints. For SSR use the next prop| |responsiveImageSSR|{srcWidth:number , srcHeight:number}||Sets a responsive image with the defined height and width| |table|{rows:number , columns:number}||Sets the number of rows and columns in the table|

Examples

Wrappers in Skeleton

The default height of wrappers is 1em, but you can change using the prop height.

const BlogPost = (props) => {
  return (
    <div>
      <h1>
        {props.title || (
          <Skeleton
            height="2em"
            placeholder="Loading..."
            placeholderPosition={{ horizontal: 'center', vertical: 'center' }}
            animation
          />
        )}
      </h1>
      {props.body || <Skeleton count={10} animation />}
    </div>
  )
}

Table in Skeleton

Generate tables while yours does not load:

const BlogPost = (props) => {
  return props.myCells.lenght > 0 ? (
    <table>
      <tbody>
        <tr>
          <td>{props.myCells[0]}</td>
          <td>{props.myCells[1]}</td>
          <td>{props.myCells[2]}</td>
        </tr>
        <tr>
          <td>{props.myCells[3]}</td>
          <td>{props.myCells[4]}</td>
          <td>{props.myCells[5]}</td>
        </tr>
        <tr>
          <td>{props.myCells[6]}</td>
          <td>{props.myCells[7]}</td>
          <td>{props.myCells[8]}</td>
        </tr>
      </tbody>
    </table>
  ) : (
    <Skeleton table={{ rows: 3, columns: 3 }} animation />
  )
}

Responsive Images in Skeleton

You can also generate several responsive images, with defined breakpoints (no limits for the number of responsive images):

const BlogPost = (props) => {
  return props.image ? (
    <img
      src={
        props.myScreenWidth <= 768 ? props.image.mobile : props.image.desktop
      }
      alt={props.imageTitle}
      width="100%"
    />
  ) : (
    <Skeleton
      responsiveImage={[
        { srcWidth: 400, srcHeight: 300, breakIn: 768 },
        { srcWidth: 1980, srcHeight: 720 }
      ]}
      animation
    />
  )
}

If you are using SSR and need to render different images for each viewport type, you can render multiple skeletons and style them with css. it's not possible to use the user's screen size in the SSR, but using the media query it works normally. Follow this example:

import './style.scss'

const BlogPost = (props) => {
  if (typeof window === 'undefined') {
    return (
      <div className="loading">
        <Skeleton responsiveImageSSR={{ srcWidth: 320, srcHeight: 212 }} />
        <Skeleton responsiveImageSSR={{ srcWidth: 1920, srcHeight: 632 }} />
      </div>
    )
  }

  if (typeof window !== 'undefined') {
    return (
      <img
        src={width < 768 ? props.image.mobile : props.image.desktop}
        alt={props.imageTitle}
        width="100%"
      />
    )
  }
}

.loading {
  .skeleton-container:nth-child(1) {
    @media (min-width: 768px) {
      display: none;
    }
  }

  .skeleton-container:nth-child(2) {
    @media (max-width: 767px) {
      display: none;
    }
  }
}

The props placeholderPosition ~and animation~ don't working corretly with SSR. Wait for more atts. Animation working with SSR.