@snack-uikit/skeleton

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, будут отрисованы блоки скелетона.