react-cascade
v0.3.16
Published
This component cascades elements down the page, similar to masonry, but more how water behaves in a stream. It's named after the regal Cascade Range mountains near the Salish Sea.
Downloads
7
Readme
cascade
This component cascades elements down the page, similar to masonry, but more how water behaves in a stream. It's named after the regal Cascade Range mountains near the Salish Sea.
Features:
- Uses requestAnimationFrame, optionally plugging in to a scheduler of your choice.
- When elements not in the viewport they are removed from the DOM and added back in when their position is scrolled back into the viewport.
- Automatically updates layout whenever a child's height changes.
- Fires event:
onEnd
to load more items when the last row of elements become visible.
See it in action
First start storybook:
yarn run storybook
Then you can play with some of the different cascade stories.
In short, the basic usage is:
import Cascade from 'cascade'
// test data
const getStyle = item => ({
height: item.height + 'px',
background: item.background,
width: '323px',
padding: '10px',
margin: '10px',
border: '1px solid red',
position: 'absolute',
overflow: 'hidden',
})
const getDataItems = (from, size) => {
const items = []
for (let i = from; i < from + size; i++) {
items.push({
key: 'item-' + i,
height: 300,
background: 'aliceblue',
})
}
return items
}
const getItem = ({style = {}, item}) => {
Object.assign(style, getStyle(item))
return <div
id={item.key}
key={item.key}
style={style}
>
{item.key + ' - ' + style.height}
</div>
}
class Container extends React.Component {
constructor(props) {
super(props)
this.state = {
items: getDataItems(0, props.pageSize)
}
}
nextPage(from) {
this.setState(() => {
const items = [...this.state.items, ...getDataItems(from, this.props.pageSize)]
return { items }
})
}
render() {
return <Cascade
numCols={3}
gutter={10}
colWidth={343}
dataItems={this.state.items}
getItemComponent={getItem}
onEnd={from => this.nextPage(from)}
onChildViewed={meta => console.log('viewed: ', meta)}
/>
}
}
ReactDOM.render(
<Container pageSize={10} />,
document.getElementById('root')
);