1.0.8 • Published 3 years ago

react-cover v1.0.8

Weekly downloads
10
License
MIT
Repository
github
Last release
3 years ago

REACT-COVER

npm.io npm.io Coverage Status

A react component that support you make a loading style when loading status. Loading component is use react-loading.

image

Install

npm i react-cover

or

yarn add react-cover

Demo

DEMO LINK

Usage

Just use on props to toggle loading

import Cover from 'react-cover'

const LoadingButton = ({ on = false }) => (
  <Cover on={on}>
    <button>COVER</button>
  </Cover>
)

change style color or type

import Cover from 'react-cover'

const LoadingButton = ({ on = false }) => (
  <Cover on={on} color="red" type="balls">
    <button>COVER</button>
  </Cover>
)

if your element is in style width 100% you can use fullwidth prop

import Cover from 'react-cover'

const FullWidthComponent = ({ on = false }) => (
  <Cover on={on} fullwidth>
   <div style="width:100%;">some thine fullwidth</div>
  </Cover>
)

Props

NameTypeDefaultDescription
onbooleanfalseswitch this component active
opacitystring|number0.4opacity for covered element
colorstring'#333'control loading color
typestring'spin'control loading type of react-loading loading type
sizenumber32control loading size
loadingPropsobject{}react-loading's props
coverAdornmentjsx function-custom your loading style replace react-loading
inlinebooleanfalseif children is display inline add this prop
cursorstringinitialcontrol your cursor style when active
1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago