open-index/open-npm huggingface dataset:
npm package: @skbkontur/mini-skeleton
Description: mini-skeleton component
Author: Kontur
Latest version: 0.3.0

Компоненты для схематичного показа будущего контента.

### MiniSkeleton

```jsx harmony
import { ArticleSkeleton, ChartSkeleton, DocSkeleton, FormSkeleton, ListSkeleton, TableSkeleton } from '@skbkontur/mini-skeleton';

const styles = {
  elementStyle: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  containerStyle: {
    display: 'flex',
    flexDirection: 'row',
    gap: '5px',
  },
};

<div style={styles.containerStyle}>
  <div style={styles.elementStyle}>
    <ArticleSkeleton />
    Article
  </div>
  <div style={styles.elementStyle}>
    <ChartSkeleton />
    Chart
  </div>
  <div style={styles.elementStyle}>
    <DocSkeleton />
    Doc
  </div>
  <div style={styles.elementStyle}>
    <FormSkeleton />
    Form
  </div>
  <div style={styles.elementStyle}>
    <ListSkeleton />
    List
  </div>
  <div style={styles.elementStyle}>
    <TableSkeleton />
    Table
  </div>
</div>
```

#### Пропы

По-умолчанию установлены стандартные цвета. Но их можно переопределить через пропы `backgroundColor` и `iconColor`.

```jsx harmony
import { ArticleSkeleton, ChartSkeleton, DocSkeleton, FormSkeleton, ListSkeleton, TableSkeleton } from '@skbkontur/mini-skeleton';

const styles = {
  elementStyle: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  containerStyle: {
    display: 'flex',
    flexDirection: 'row',
  },
};

<div style={styles.containerStyle}>
  <div style={styles.elementStyle}>
    <ArticleSkeleton />
    Article
  </div>
  <div style={styles.elementStyle}>
    <ArticleSkeleton backgroundColor={'#F0F0F0'} iconColor={'#D6D6D6'} />
    Article Colored
  </div>
</div>
```