0.0.6 • Published 8 years ago

react-skeleton-screen v0.0.6

Weekly downloads
2
License
MIT
Repository
github
Last release
8 years ago

react-skeleton-screen Travis npm package

react-skeleton-screen is essentially a blank version of a page into which information is gradually loaded.

Skeleton screenLoaded screen
Screen Shot 2017-12-14 at 00.31.35.pngloaded.png

Installation

Using yarn:

$ yarn add react-skeleton-screen

Then, use as you would anything else:

// using ES6 modules
import { Skeleton } from 'react-skeleton-screen'

// using CommonJS modules
var Skeleton = require('react-skeleton-screen').Skeleton

Usage

import React from 'react'
import { Skeleton } from 'react-skeleton-screen'
import 'react-skeleton-screen/build/skeleton.css'
// using scss
//import 'react-skeleton-screen/scss/Skeleton.scss'

const App = ({ isLoading }) => (
  isLoading
    ? <div>
        <Skeleton width="160px" height="30px" />
        <Skeleton width="70%" height="25px" marginLeft="30px" />
        <Skeleton width="60%" height="25px" marginLeft="30px" />
        <Skeleton width="110px" height="30px" />
        <Skeleton width="55%" height="25px" marginLeft="30px" />
        <Skeleton width="140px" height="30px" />
        <Skeleton width="55%" height="25px" marginLeft="30px" />
        <Skeleton width="65%" height="25px" marginLeft="30px" />
        <Skeleton width="90px" height="30px" />
        <Skeleton width="80%" height="25px" marginLeft="30px" />
        <Skeleton width="65%" height="25px" marginLeft="30px" />
      </div>
    : <div>Your app has been loaded!</div>
)

export default App

API

PropTypeDefaultDescription
widthstring100%The width of the Skeleton. Eg: 100px or 20% or 10em
heightstring100%The height of the Skeleton. Eg: 40px
marginTopstring0The margin-top of the Skeleton. Eg: 5px
marginRightstring0The margin-right of the Skeleton. Eg: 5px
marginBottomstring0The margin-bottom of the Skeleton. Eg: 10px
marginLeftstring0The margin-left of the Skeleton. Eg: 30px
0.0.6

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago

1.0.0

8 years ago