4.8.1 • Published 3 years ago

@workday/canvas-kit-react-skeleton v4.8.1

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

Canvas Kit Skeleton

A component that renders a skeleton (a placeholder for future content). The skeleton component takes in children skeleton components and displays them with an animated sheen to indicate loading.

Installation

yarn add @workday/canvas-kit-react

or

yarn add @workday/canvas-kit-react-skeleton

Skeleton

This component places its children in a div marked with the aria-hidden attribute and displays an aria-live status to specify that the content is loading.

Usage

import * as React from 'react';
import {
  Skeleton,
  SkeletonHeader,
  SkeletonShape,
  SkeletonText,
} from '@workday/canvas-kit-react-skeleton';

<Skeleton>
  <SkeletonShape width={50} height={50} borderRadius={99} />
  <SkeletonHeader />
  <h1>Hello!</h1>
  <SkeletonText lineCount={3} />
</Skeleton>;

Note: In this example, non-Skeleton elements like <h1>Hello!</h1> will still show. This allows the flexibility for users to create more custom Skeletons.

Static Properties

None

Component Props

None

SkeletonHeader

A component that renders a header placeholder for a skeleton. This component has a width of 100% and fixed height of 28px.

Usage

import * as React from 'react';
import {Skeleton, SkeletonHeader} from '@workday/canvas-kit-react-skeleton';

<Skeleton>
  <SkeletonHeader />
</Skeleton>;

Static Properties

None

Component Props

Required

None

Optional

None

SkeletonShape

A component that renders a general shape placeholder for a skeleton. It gives the ability to alter the borderRadius, width, and height to make various rectangular and circular shapes.

Usage

import * as React from 'react';
import {Skeleton, SkeletonShape} from '@workday/canvas-kit-react-skeleton';

<Skeleton>
  <SkeletonShape width={50} height={50} borderRadius={99} />
</Skeleton>;

Static Properties

None

Component Props

Required

None

Optional

width: number | string

The width of the shape in px or %.

Default: "100%"

height: number | string

The height of the shape in px or %.

Default: "100%"

borderRadius: number | string

The borderRadius of the shape in px or %.

Default: 0

SkeletonText

A component that renders a text placeholder for a skeleton. Each line has a width of 100% and a fixed height of 21px. If there is more then one line of text the last line of the SkeletonText will have a width of 60%.

Usage

import * as React from 'react';
import {Skeleton, SkeletonText} from '@workday/canvas-kit-react-skeleton';

<Skeleton>
  <SkeletonText lineCount={3} />
</Skeleton>;

Static Properties

None

Component Props

Required

None

Optional

lineCount: number

The number of "lines" that it will display. If there's more than one line, then the last line will have a width of 60%

Default: 2

canvascanvas-kitreactcomponentsworkdayskeleton
@emotion/core@emotion/styled@workday/canvas-kit-react-common@workday/canvas-kit-react-core
@infinitebrahmanuniverse/nolb-_wor@everything-registry/sub-chunk-1021
4.8.3

3 years ago

4.8.2

3 years ago

4.8.1

3 years ago

4.8.0

3 years ago

4.7.1-next.18

3 years ago

4.7.1-next.14

3 years ago

4.7.1-next.15

3 years ago

4.7.1-next.16

3 years ago

4.7.1-next.0

3 years ago

4.7.1-next.1

3 years ago

4.7.1-next.2

3 years ago

4.7.1-next.3

3 years ago

4.7.1-next.4

3 years ago

4.7.1-next.5

3 years ago

4.7.1-next.6

3 years ago

4.7.1-next.7

3 years ago

4.7.1-next.8

3 years ago

4.7.1-next.9

3 years ago

4.7.1-next.10

3 years ago

4.7.1-next.11

3 years ago

4.7.1-next.12

3 years ago

4.7.0

3 years ago

4.6.1-next.3

3 years ago

4.6.1-next.2

3 years ago

4.6.1-next.1

3 years ago

4.6.0

3 years ago

4.5.2-next.3

3 years ago

4.5.2-next.1

3 years ago

4.5.2-next.2

3 years ago

4.5.2-next.0

3 years ago

4.5.1

3 years ago

4.5.1-next.3

3 years ago

4.5.1-next.2

3 years ago

4.5.1-next.1

3 years ago

4.5.1-next.4

3 years ago

4.5.1-next.0

3 years ago

5.0.0-beta.1-next.6

3 years ago

5.0.0-beta.1-next.5

3 years ago

4.5.0

3 years ago

5.0.0-beta.1-next.4

3 years ago

4.4.3-next.15

3 years ago

4.4.3-next.14

3 years ago

4.4.3-next.17

3 years ago

4.4.3-next.16

3 years ago

4.4.3-next.18

3 years ago

4.4.3-next.13

3 years ago

4.4.3-next.12

3 years ago

5.0.0-beta.1-next.3

3 years ago

4.4.3-next.11

3 years ago

5.0.0-beta.0

3 years ago

5.0.0-beta.0-next.7

3 years ago

4.3.1-beta.0-next.6

3 years ago

4.4.3-next.10

3 years ago

4.4.3-next.9

3 years ago

4.3.1-beta.0-next.5

3 years ago

4.4.3-next.8

3 years ago

4.3.1-beta.0-next.3

3 years ago

4.4.3-next.7

3 years ago

4.4.3-next.6

3 years ago

4.4.3-next.5

3 years ago

4.4.3-next.4

3 years ago

4.4.3-next.3

3 years ago

4.4.3-next.0

3 years ago

4.4.3-next.1

3 years ago

4.4.2

3 years ago

4.4.2-next.4

3 years ago

4.4.2-next.3

3 years ago

4.4.2-next.2

3 years ago

4.4.1-next.4

3 years ago

4.4.1

3 years ago

4.4.1-next.3

3 years ago

4.4.1-next.2

3 years ago

4.4.1-next.0

3 years ago

4.4.1-next.1

3 years ago

4.3.2-next.6

3 years ago

4.4.0

3 years ago

4.3.2-next.4

3 years ago

4.3.2-next.3

3 years ago

4.3.2-next.5

3 years ago

4.3.2-next.2

3 years ago

4.3.2-next.1

3 years ago

4.3.2-next.0

3 years ago

4.3.1

4 years ago

4.3.1-next.4

4 years ago

4.3.1-next.2

4 years ago

4.3.1-next.3

4 years ago

4.3.1-next.1

4 years ago

4.3.1-next.0

4 years ago

4.3.0

4 years ago

4.1.3-next.28

4 years ago

4.1.3-next.27

4 years ago

4.1.3-next.26

4 years ago

4.1.3-next.25

4 years ago

4.1.3-next.24

4 years ago

4.1.3-next.23

4 years ago

4.1.3-next.22

4 years ago

4.1.3-next.21

4 years ago

4.1.3-next.20

4 years ago

4.1.3-next.17

4 years ago

4.1.3-next.18

4 years ago

4.1.3-next.16

4 years ago

4.2.0

4 years ago

4.1.3-next.13

4 years ago

4.1.3-next.12

4 years ago

4.1.3-next.10

4 years ago

4.1.3-next.11

4 years ago

4.1.3-next.8

4 years ago

4.1.3-next.9

4 years ago

4.1.3-next.6

4 years ago

4.1.3-next.7

4 years ago

4.1.3-next.4

4 years ago

4.1.3-next.3

4 years ago

4.1.3-next.0

4 years ago

4.1.3-next.1

4 years ago

4.1.2

4 years ago

4.0.3

4 years ago

3.9.3

4 years ago

4.1.2-next.0

4 years ago

4.0.2

4 years ago

4.1.1

4 years ago

4.1.1-next.5

4 years ago

4.1.1-next.4

4 years ago

4.1.1-next.3

4 years ago

4.1.1-next.0

4 years ago

4.1.1-next.2

4 years ago

4.1.0

4 years ago

4.0.1-next.19

4 years ago

4.0.1-next.18

4 years ago

4.0.1-next.17

4 years ago

4.0.1-next.16

4 years ago

4.0.1-next.15

4 years ago

4.0.1-next.14

4 years ago

4.0.1

4 years ago

3.9.1

4 years ago

4.0.1-next.12

4 years ago

4.0.1-next.11

4 years ago

4.0.1-next.9

4 years ago

4.0.1-next.10

4 years ago

4.0.1-next.7

4 years ago

4.0.1-next.8

4 years ago

4.0.1-next.6

4 years ago

4.0.1-next.5

4 years ago

4.0.1-next.4

4 years ago

4.0.1-next.3

4 years ago

4.0.1-next.2

4 years ago

4.0.1-next.1

4 years ago

4.0.1-next.0

4 years ago

4.0.0

4 years ago

3.8.1-next.16

4 years ago

3.8.1-next.17

4 years ago

3.9.0

4 years ago

4.0.0-beta.5

4 years ago

3.8.1-next.15

4 years ago

3.8.1-next.14

4 years ago

3.8.1-next.13

4 years ago

3.8.1-next.12

4 years ago

3.8.1-next.11

4 years ago

3.8.1-next.10

4 years ago

3.8.1-next.8

4 years ago

3.8.1-next.9

4 years ago

3.8.1-next.7

4 years ago

3.8.1-next.6

4 years ago

3.8.1-next.5

4 years ago

3.8.1-next.4

4 years ago

3.8.1-next.3

4 years ago

3.8.1-next.2

4 years ago

3.8.1-next.0

4 years ago

3.8.1-next.1

4 years ago

3.8.0

4 years ago

3.7.1-next.8

4 years ago

3.7.1-next.7

4 years ago

3.7.1-next.6

4 years ago

3.7.1-next.3

4 years ago

3.7.1-next.4

4 years ago

3.7.1-next.5

4 years ago

4.0.0-beta.4

4 years ago

4.0.0-prerelease.f29f26b.3

4 years ago

4.0.0-prerelease.25ebd14.2

4 years ago

4.0.0-prerelease.370c732.1

4 years ago

4.0.0-prerelease.9bee8d0.0

4 years ago

3.7.1-next.2

4 years ago

3.7.1-next.0

4 years ago

4.0.0-prerelease.2df320f.3

4 years ago

4.0.0-beta.3

4 years ago

4.0.0-prerelease.42c1aef.2

4 years ago

4.0.0-prerelease.bf33fae.0

4 years ago

4.0.0-prerelease.839d919.25

4 years ago

4.0.0-prerelease.0ec7791.1

4 years ago

4.0.0-beta.2

4 years ago

4.0.0-prerelease.0c47b9c.26

4 years ago

4.0.0-prerelease.22c6ff1.24

4 years ago

4.0.0-prerelease.9daf370.23

4 years ago

4.0.0-prerelease.e668828.22

4 years ago

3.6.1-next.14

4 years ago

4.0.0-prerelease.da2d967.21

4 years ago

4.0.0-prerelease.5f48600.20

4 years ago

3.7.0

4 years ago

4.0.0-prerelease.baf5748.18

4 years ago

4.0.0-prerelease.c1d3fa5.19

4 years ago

4.0.0-prerelease.ba8e51e.17

4 years ago

3.6.1-next.13

4 years ago

4.0.0-prerelease.f1e1a93.16

4 years ago

3.6.1-next.12

4 years ago

3.6.1-next.11

4 years ago

3.6.1-next.10

4 years ago

3.6.1-next.9

4 years ago

3.6.1-next.8

4 years ago

3.6.1-next.7

4 years ago

3.6.1-next.6

4 years ago

3.6.1-next.5

4 years ago

3.6.1-next.4

4 years ago

4.0.0-prerelease.9

4 years ago

4.0.0-prerelease.8

4 years ago

3.6.1-next.3

4 years ago

3.6.1-next.2

4 years ago

3.6.1-next.1

4 years ago

3.6.1-next.0

4 years ago

4.0.0-prerelease.7

4 years ago

4.0.0-beta.1

4 years ago

3.5.1-next.10

4 years ago

3.6.0

4 years ago

3.4.1

4 years ago

3.5.1-next.9

4 years ago

4.0.0-prerelease.5

4 years ago

4.0.0-prerelease.6

4 years ago

4.0.0-prerelease.4

4 years ago

4.0.0-prerelease.3

4 years ago

4.0.0-prerelease.2

4 years ago

3.5.1-next.8

4 years ago

4.0.0-prerelease.0

4 years ago

4.0.0-prerelease.1

4 years ago

4.0.0-prerelease.23

4 years ago

4.0.0-beta.0

4 years ago

4.0.0-prerelease.20

4 years ago

4.0.0-prerelease.22

4 years ago

3.5.1-next.7

4 years ago

3.5.1-next.6

4 years ago

4.0.0-prerelease.19

4 years ago

4.0.0-prerelease.17

4 years ago

4.0.0-prerelease.18

4 years ago

3.5.1-next.5

4 years ago

4.0.0-prerelease.16

4 years ago

3.5.1-next.4

4 years ago

3.5.1-next.2

4 years ago

4.0.0-prerelease.14

4 years ago

4.0.0-prerelease.15

4 years ago

3.5.1-next.3

4 years ago

3.5.1-next.1

4 years ago

3.5.1-next.0

4 years ago

3.5.0

4 years ago

3.4.1-next.17

4 years ago

3.4.1-next.16

4 years ago

3.4.1-next.15

4 years ago

4.0.0-prerelease.11

4 years ago

3.4.1-next.14

4 years ago

3.4.1-next.13

4 years ago

3.4.1-next.12

4 years ago

4.0.0-prerelease.10

4 years ago

3.4.1-next.11

4 years ago

3.4.1-prerelease.9

4 years ago

3.4.1-next.10

4 years ago

3.4.1-next.9

4 years ago

3.4.1-prerelease.8

4 years ago

3.4.1-next.8

4 years ago

3.4.1-next.6

4 years ago

3.4.1-next.7

4 years ago

3.4.1-next.5

4 years ago

3.4.1-next.4

4 years ago

3.4.1-next.3

4 years ago

3.4.1-next.2

4 years ago

3.4.1-next.0

4 years ago

3.4.1-next.1

4 years ago

3.3.3-next.31

4 years ago

3.3.3-next.30

4 years ago

3.4.0

4 years ago

3.3.3-next.29

4 years ago

3.3.3-next.26

4 years ago

3.3.3-next.28

4 years ago

3.3.3-next.27

4 years ago

3.3.3-next.25

4 years ago

3.3.3-next.21

4 years ago

3.3.3-next.19

4 years ago

3.3.3-next.18

4 years ago

3.3.3-next.17

4 years ago

3.3.3-next.15

4 years ago

3.3.3-next.14

4 years ago

3.3.3-next.16

4 years ago

3.3.0

4 years ago

3.2.0

4 years ago

3.1.0

4 years ago

3.0.0

5 years ago

3.0.0-beta.1

5 years ago

3.0.0-beta.0

5 years ago

3.0.0-alpha.7

5 years ago

3.0.0-alpha.6

5 years ago

3.0.0-alpha.5

5 years ago

3.0.0-alpha.4

5 years ago

3.0.0-alpha.3

5 years ago

3.0.0-alpha.2

5 years ago

3.0.0-alpha.1

5 years ago