react-famous Scrollview with dynamic prop https://github.com/pilwon/react-famous/issues/14#issuecomment-96441879

react-famous-scrollview-with-dynamic-prop.js

import startsWith from 'lodash/string/startsWith';
import React from 'react';
import Context from 'react-famous/core/Context';
import Surface from 'react-famous/core/Surface';
import Scrollview from 'react-famous/views/Scrollview';

const SURFACE_REF_PREFIX = 'surface_';

class Component extends React.Component {
  componentDidMount() {
    let scrollview = this.refs.scrollview.getFamous();

    Object.keys(this.refs)
      .filter((key) => startsWith(key, SURFACE_REF_PREFIX))
      .map((key) => this.refs[key].getFamous())
      .forEach((surface) => surface.pipe(scrollview));
  }

  render() {
    let surfaces = this.props.events.map((event, idx) => {
      let options = {
        properties: {
          backgroundColor: 'hsl(' + (idx * 360 / this.props.events.length) + ', 100%, 50%)',
          lineHeight: '100px',
          textAlign: 'center'
        },
        size: [undefined, 100]
      };
      return (
        <Surface key={idx} ref={`${SURFACE_REF_PREFIX}${idx}`} options={options}>
          Surface {idx + 1}
        </Surface>
      );
    });

    return (
      <Context>
        <Scrollview ref="scrollview">
          {surfaces}
        </Scrollview>
      </Context>
    );
  }
}

Component.defaultProps = {
  events: [
    {id: 1},
    {id: 2},
    {id: 3},
    {id: 4},
    {id: 5},
    {id: 6},
    {id: 7},
    {id: 8},
    {id: 9},
    {id: 10},
  ]
};

export default Component;