README
the-repeatable
Repeatable of the-component
Installation
$ npm install the-repeatable --save
Usage
'use strict'
import React from 'react'
import { TheRepeatable, TheRepeatableStyle } from 'the-repeatable'
import { TheSpinStyle } from 'the-spin'
class ExampleComponent extends React.PureComponent {
render () {
const data = new Array(25).fill(null).map((_, i) => ({id: i, name: `data-${i}`}))
return (
<div>
<TheSpinStyle/>
<TheRepeatableStyle/>
<TheRepeatable spinning={false}
data={data}
render={(data, i) => (
<div>This is data: {data.name}</div>
)}
/>
<h3>Horizontal</h3>
<TheRepeatable spinning={false}
data={data}
horizontal
render={(data, i) => (
<div>This is data: {data.name}</div>
)}
/>
<h3>Spinning</h3>
<TheRepeatable spinning={true}
data={data}
render={(data, i) => (
<div>This is data: {data.name}</div>
)}
/>
<h3>Empty</h3>
<TheRepeatable spinning={false}
data={[]}
render={(data, i) => (
<div>This is data: {data.name}</div>
)}
/>
</div>
)
}
}
export default ExampleComponent
Components
TheRepeatable
Repeatable of the-component
Props
Name | Type | Description | Default |
---|---|---|---|
ItemComponent |
any | Item component | 'li' |
ListComponent |
any | List component | 'ul' |
alt |
node | Alt text when empty | 'Data Not Found' |
data |
array | Items to render | [] |
horizontal |
bool | Render as horizontal list | false |
introItem |
node | Intro item | null |
keyFor |
func | Get key for data | (data, i) => i |
outroItem |
node | Outro item | null |
render |
func | Renderer | null |
spinning |
bool | Shows spinner | false |
TheRepeatableStyle
Style for TheRepeatable
Props
Name | Type | Description | Default |
---|---|---|---|
options |
object | Style options | {} |
License
This software is released under the MIT License.