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
11
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')
);