react-cascade

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