Skeleton

Installation

npm i @snack-uikit/skeleton

Changelog

SkeletonContextProvider

Для централизованного управления состоянием загрузки можно использовать SkeletonContextProvider. Находящиеся внутри этого контекста компоненты Skeleton и SkeletonText не требуют активации через проп loading а берут его из контекста.

WithSkeleton

Для группировки блоков скелетона используется компонент WithSkeleton. В проп skeleton он принимает ноду скелетона, а в children то, что он заменяет. Компонент также забирает пропсу loading из контекста.

<SkeletonContextProvider loading={isLoading}>
  <WithSkeleton skeleton={<CardSkeleton />}>
    <Card />
  </WithSkeleton>
</SkeletonContextProvider>

Skeleton

Props

| name | type | default value | description | |------|------|---------------|-------------| | loading | boolean | - | Флаг состояния загрузки. Если значение true, будет отрисован блок скелетона, если false - children. | | width | Width<string \| number> | - | Ширина блока. Можно указать значение допустимое для CSSProperty.width (пример '60%', '400px' и т.д) | | height | Height<string \| number> | - | Высота блока. Можно указать значение допустимое для CSSProperty.height (пример '60%', '400px' и т.д) | | borderRadius | BorderRadius<string \| number> | - | Радиус скругления. Можно указать значение допустимое для CSSProperty.borderRadius (пример '10px', '50%' и т.д) | | className | string | - | CSS-класс |

SkeletonText

Props

| name | type | default value | description | |------|------|---------------|-------------| | loading | boolean | - | Флаг состояния загрузки. Если значение true, будет отрисован блок скелетона, если false - children. | | width | Width<string \| number> | - | Ширина блока. Можно указать значение допустимое для CSSProperty.width (пример '60%', '400px' и т.д) | | borderRadius | BorderRadius<string \| number> | 0.4em | Радиус скругления. Можно указать значение допустимое для CSSProperty.borderRadius (пример '10px', '50%' и т.д) | | className | string | - | CSS-класс | | lines | number | 3 | Количество строк. | | rowClassName | string | - | CSS-класс строки | | lineClassName | string | - | CSS-класс линии |

WithSkeleton

Props

| name | type | default value | description | |------|------|---------------|-------------| | skeleton* | ReactNode | - | JSX скелетон | | loading | boolean | - | Флаг состояния загрузки. Если значение true, будет отрисован блок скелетона, если false - children. |

SkeletonContextProvider

Props

| name | type | default value | description | |------|------|---------------|-------------| | loading* | boolean | - | Флаг состояния загрузки. Если значение true, будут отрисованы блоки скелетона. |