# react-waterfall-w

> Waterfall for react.

Latest version **1.0.8** (published 2017-03-22) · 0 weekly downloads

## Install

```sh
npm install react-waterfall-w
pnpm add react-waterfall-w
yarn add react-waterfall-w
bun add react-waterfall-w
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2017-03-22 |
| First published | 2017-03-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | weiyisheng |
| Maintainers | weiyisheng |

## Links

- npm: https://www.npmjs.com/package/react-waterfall-w
- Repository: https://github.com/weiyisheng/react-waterfall-w
- Homepage: https://github.com/weiyisheng/react-waterfall-w#readme
- Issues: https://github.com/weiyisheng/react-waterfall-w/issues
- npm.io page: https://npm.io/package/react-waterfall-w

## Recent versions

- 1.0.8 (latest) — 2017-03-22
- 1.0.7 — 2017-03-17
- 1.0.4 — 2017-03-01
- 1.0.2 — 2017-03-01
- 1.0.0 — 2017-03-01

## README

# 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
http://37.139.22.91:3009/

## looks like: 
![Alt text](/example3.png)
![Alt text](/example2.png)
![Alt text](/example1.png)

## install
`npm install react-waterall-w --save`

## how to use
```javascript
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 <img /> in your ItemComponent, you better invoke onMeasured method in img's onLoad), and invoke **onMeasured(itemWidth, itemHeight)**.

## example
1. check this out : https://github.com/weiyisheng/geminis-blog
2. npm install
3. npm run dev
4. enjoy: http://localhost:3009/

---
_Source: https://npm.io/package/react-waterfall-w · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._