Skip to content

Skeleton

Loading placeholder
import { Skeleton } from '@ensdomains/thorin'
<DeleteMe>
  <Skeleton loading={getState('skeleton')}>Hello World</Skeleton>
  <VisuallyHidden>{setDefaultState('skeleton', true)}</VisuallyHidden>
  <Button onClick={() => toggleState('skeleton')}>Toggle</Button>
</DeleteMe>

Props
#

name
type
default
description
as
"span"
-
An alternative element type to render the component as.
loading
boolean
-
If true, hides the content and shows the skeleton style.

Wrap content
#

The container will automatically resize to encompass wrapped content.

Skeleton Group
#

Nest inside SkeletonGroup to manage multiple skeletons with a single loading prop.

Edit on GitHub