2.2.0 • Published 2 years ago

@hig/skeleton-item v2.2.0

Weekly downloads
3
License
Apache-2.0
Repository
github
Last release
2 years ago

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} />
  );
}
2.2.0

2 years ago

2.1.0

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

2.0.0

2 years ago

1.2.0

3 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.1

5 years ago

1.0.0

5 years ago

0.3.1

6 years ago

0.3.0

6 years ago

0.2.0

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago