v0.3.9 — per-element bones, zero config

Stop writing skeleton

loaders.

Use react-zero-skeleton.

Wrap your component. Pass two props. skelter measures the real layout and generates one bone per element — automatically, always in sync. Works with React Native and React.

Get started →See the code
1

Wrap

withSkeleton(YourComponent)

2

Pass one prop

isLoadingSkeleton

3

Done

Bones match your layout, always.

Live demo

See it in action

J

Jane Doe

Product Designer · skelter

How skelter works under the hood

Measures your real component layout and generates one bone per element — always in sync.

2 props
to add
0
config needed
1:1
bone per element

Real components — skelter measures their layout and generates bones automatically.

The difference

Every other library
// Other libs — you write the component...
function ArticleCard({ article }) {
  return (
    <View>
      <Image source={{ uri: article.cover }}
             style={{ height: 160 }} />
      <Text style={{ fontSize: 16 }}>{article.title}</Text>
      <Text style={{ color: '#888' }}>{article.excerpt}</Text>
    </View>
  );
}
 
// ...then write it AGAIN as a skeleton.
const ArticleCardSkeleton = () => (
  <SkeletonPlaceholder>
    <View style={{ height: 160 }} />
    <View style={{ width: '80%', height: 18 }} />
    <View style={{ width: '60%', height: 14 }} />
  </SkeletonPlaceholder>
);
 
// Two components. Always drifting out of sync.
skelter — React Native
// skelter (React Native) — write it once.
import { withSkeleton } from 'react-zero-skeleton';
 
function ArticleCard({ article }) {
  return (
    <View>
      <Image source={{ uri: article.cover }}
             style={{ height: 160 }} />
      <Text style={{ fontSize: 16 }}>{article.title}</Text>
      <Text style={{ color: '#888' }}>{article.excerpt}</Text>
    </View>
  );
}
 
export default withSkeleton(ArticleCard);
 
// Use it:
<ArticleCard hasSkeleton isLoading={isLoading}
             article={data} />
 
// skelter measures the layout.
// Bones generated automatically. Always in sync.

Same import react-zero-skeleton — bundler picks the right version automatically.