Responsive Layout Libary For React

Fork me on Github

Usage

Simplest example:

class SimplestSampleComponent extends React.Component {

  ...

  render() {
    return (
      <div>
        <div className="btn-group">
          {this.renderButtons()}
        </div>
        <AutoResponsive ref="container" {...this.getAutoResponsiveProps()}>
          {this.renderItems()}
        </AutoResponsive>
      </div>
    );
  }
}

The completion of a waterfall layout becomes very simple

class WaterfallSampleComponent extends React.Component {

  ...

  render() {
    return (
      <AutoResponsive ref="container" {...this.getAutoResponsiveProps()}>
        {
          arrayList.map(function(i) {
            return <div onClick={this.clickItemHandle} className="item" style={this.state.styleList[i]}>{i}</div>;
          }, this)
        }
      </AutoResponsive>
    );
  }
}

Examples

NormalSample

ReactNativeSample

Options

containerWidth

Type: Number, Default: 1024

container total width

containerHeight

Type: String || Number, Default: null

container total height

columnWidth

Type: Number, Default: 10

column width

prefixClassName

Type: String, Default: 'rc-autoresponsive'

container node's class name

itemClassName

Type: String, Default: 'item'

item selector

itemMargin

Type: Number, Default: 0

item margin

horizontalDirection

Type: String, Default: 'left'

horizontal direction

verticalDirection

Type: String, Default: 'top'

vertical direction

closeAnimation

Type: Boolean, Default: false

close animation

transitionDuration

Type: Number, Default: 1

transition duration, such as .8s### transitionTimingFunction

Type: String, Default: 'linear'

transition timing function, such as easeIn

Events

onItemDidLayout

Type: Function, param: item

before render, and after single item layout compeleted

onContainerDidLayout

Type: Function

before render, and after container layout compeleted