react-waterfall-layout

light sample

Getting Started

npm i react-water-layout

Demo

git clone https://github.com/leeleoo/react-waterfall-layout.git

and npm install in react-waterfall-layout

then run npm start and visit localhost:3344

Usage

props	type	description
data	array	the waterfall data
renderItem	fuc(dataItem,itemIndex):component	Takes a data entry from the data source and its ids and should return a renderable component to be rendered as the item
itemWith	number (default 200)	the width of each waterfall item

you code would like this

  <WaterFall
      data={[{title:'title1',content:'content1'},{title:'title1',content:'content2,content2,content2'}]}
      renderItem={({title,content},index)=>{
           return <div>{title}{content}</div>
      }}
      style={{display:'flex'}}
      className="blah"
  />

Last

if you will overwrite the default style ,  I  would give you best wishes;
the default style of waterfall container:

    { 
        display: 'flex', 
        justifyContent: 'space-around', 
        overflow: 'auto', 
        alignItems: 'flex-start' 
    }