0.0.4 • Published 5 years ago
yallah-react v0.0.4
yallah-react
quick and simple react components
Install
npm i --save yallah-reactComponents
Loader
| props | type | description | |
|---|---|---|---|
| isLoading | boolean | shows loadingElement in place of children if true | |
| children | JSX | JSX[] | element(s) to display when loading complete |
| loadingElement? | JSX | overrides default loading element that replaces above element(s) when loading |
Loader Usage
import {Loader} from 'yallah-react'
const customLoadingSpinner = <div>custom loading spinner</div>
<Loader
isLoading={this.state.isLoading}
loadingElement={customLoadingSpinner}
>
<div>element that should show after loading complete</div>
</Loader>Hider
| props | type | description | |
|---|---|---|---|
| isHidden | boolean | hides children and shows loadingElement if defined | |
| children | JSX | JSX[] | element(s) to display when not hidden |
| placeholderElement? | JSX | optional element that will replace above element(s) when hidden |
Hider Usage
import {Hider} from 'yallah-react'
const customPlaceholder = <div>custom placeholder</div>
<Hider
isHidden={this.state.isHidden}
placeholderElement={customPlaceholder}
>
<div>element that should show when not hidden</div>
</Hider>SectionAlternator
| props | type | description |
|---|---|---|
| children | JSX[] | element(s) to display when not hidden |
| wrapElemStyles | { styleKey: string: string }[] | css styles to be applied to alternating sections (requires 2 min) |
| keyPrefix | string | unique (for each instance of SectionAlternator) prefix used to generate keys for section items |
| wrapElemType? | string | optional tagname for wrapping element to override default 'div' |
SectionAlternator Usage
import {SectionsAlternator} from 'yallah-react'
<SectionsAlternator
wrapElemStyles={[
{ backgroundColor: 'white' },
{ backgroundColor: 'black' },
]}
>
<div>test section 1</div>
<div>test section 2</div>
<div>test section 3</div>
<div>test section 4</div>
</SectionsAlternator>License
MIT © ricefice