Naphthalene Possum Management

    @hig/skeleton-item

    1.2.0 • Public • Published

    Skeleton Item

    The Skeleton Item component renders a rectangular loading indicator, meant to serve as a placeholder until your actual content is ready to be rendered.

    Getting started

    yarn add @hig/skeleton-item @hig/theme-context @hig/theme-data
    

    Import the component

    import SkeletonItem from '@hig/skeleton-item';
    

    Basic usage

    <SkeletonItem maxWidth="400px" marginBottom="24px" />

    Custom CSS

    Use the className prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

    SkeletonItem also has a stylesheet prop that accepts a function wherein you can modify its styles. For instance

    import SkeletonItem from '@hig/skeleton-item';
    
    function YourComponent() {
      // ...
      const customStylesheet = (styles, props, themeData) => ({
        ...styles,
        skeletonItem: {
          ...styles.skeletonItem,
          color: themeData["colorScheme.status.error"]
        }
      });
    
      return (
        <SkeletonItem stylesheet={customStylesheet} />
      );
    }

    Keywords

    none

    Install

    npm i @hig/skeleton-item

    DownloadsWeekly Downloads

    40

    Version

    1.2.0

    License

    Apache-2.0

    Unpacked Size

    17.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • devfoncy
    • hig-bot
    • nfiniteset
    • wmui51
    • staceyshk
    • sherm.newsom
    • grantkellyadsk