@snack-uikit/skeleton NPM

Skeleton

Installation

npm i @snack-uikit/skeleton

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