1.0.8 • Published 7 years ago
react-waterfall-w v1.0.8
react-waterfall-w
react waterfal Pinterst like Waterfall ( React Component). responce to the container change. If you find some bugs, or you have some ideas, please let me know(send a issue).
demo
looks like:
install
npm install react-waterall-w --save
how to use
import Waterfall from 'react-waterfall-w'
import WaterfallItem from 'your custom ItemComnent'
class example extends React.Component {
render() {
return (
<Waterfall
items={[...,the array of items]}
renderItem={(item, onMeasured) => {return <WaterfallItem item={item} onMeasured={onMeasured}/>}}/>
)
}
}
docs
The Waterfall accept 2 props: items and renderItem.
items
items is the data source
renderItem
renderItem is a function that you can use to render your own ItemComponent.The argument item in renderItem is current item data, and the other argument onMeasured is a function you should invoke in your ItemComponent when final width is confirm (most times in componentDidMount, if you get a in your ItemComponent, you better invoke onMeasured method in img's onLoad), and invoke onMeasured(itemWidth, itemHeight).
example
- check this out : https://github.com/weiyisheng/geminis-blog
- npm install
- npm run dev
- enjoy: http://localhost:3009/