Simple Skeleton Loading Component For React & React Native – Bones

Description:

A dead simple yet fully configurable skeleton loading indicator component for both React and React Native.

How to use it:

1. Install and import the component.

# NPM
$ npm i react-bones

// React
import { Bones } from "react-bones/lib";
// React-Native
import { Bones } from "react-bones/native";

2. Create a basic skeleton loading indicator.

() => <Bones />

3. Determine the width of the skeleton loading indicator.

() => <Bones width={500} />

4. Create a circular skeleton loading indicator.

() => <Bones borderRadius={25} />

5. Create a complex skeleton loading indicator.

() => (
  // Views or div if web
  <View>
    <Bones borderRadius={25} />
    <View style={{ padding: 10 }} />
    <Bones width={600} height={20} borderRadius={10} />
    <View style={{ padding: 10 }} />
    <Bones width={600} height={20} borderRadius={10} />
    <View style={{ padding: 10 }} />
    <Bones width={600} height={20} borderRadius={10} />
    <View style={{ padding: 10 }} />
  </View>
)

6. All component props.

width?: number;
height?: number;
toColor?: string;
fromColor?: string;
duration?: number;
borderRadius?: number;

Preview: