Network Pipe Manufacturer

    @acctglobal/skeleton
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    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.

    Keywords

    none

    Install

    npm i @acctglobal/skeleton

    DownloadsWeekly Downloads

    274

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    157 kB

    Total Files

    43

    Last publish

    Collaborators

    • luiz.priolli
    • ricardo.freitas
    • fabioacct