volkeno-react-skeleton

volkeno-react-skeleton lets you create beautiful animated loading skeletons that automatically adapt to your react application.

Install

npm install --save volkeno-react-skeleton

Usage

import React, { Component } from 'react'

import VolkenoSkeleton from 'volkeno-react-skeleton'
import 'volkeno-react-skeleton/dist/index.css'

class Example extends Component {
  render() {
    <VolkenoSkeleton
      variant='rect'
      count={1}
      width={30}
      height={30}
      style={{ marginTop: '1rem' }}
    />
  }
}

Configuration - Props

| Property | Type | Require | Default | Description | | ------------------------ | :-----------------: | :-------:| :-------:| :------------------------------------------------------------------------------ | | variant | string | true | ... | Skeleton type (circle, rect, text) | | width | string or number | false | 100px | The width of the skeleton | | height | string or number | false | 100px | The height of each skeleton line | | borderRadius | string or number | false | 10px | The border radius of the skeleton | | style | React.CSSProperties | false | ... | Apply a style to your skeleton | | count | number | false | 1 | The number of lines of skeletons to render. | | className | string | false | ... | A custom class name for the individual skeleton elements |

License

MIT © VolkenoMakers