React Flexbox Grid Versions Save

Sorry for the long wait, 😅 we finally landed much needed features! 🎉 We will continue to improve on these, please continue to raise issues and PRs. 😉

CSS Modules are optional

You can use configure webpack to use CSS Modules for flexboxgrid, but this is now optional. The library automatically falls back to regular flexboxgrid classes like .row and .col-xs-5. Meteor users should now have no problem using this library. Thanks to @nathanstitt! #90

Better dependencies

babel-polyfill and classnames are no longer dependencies of this library, thanks to @eemeli. #66 Also, flexboxgrid is now a regular dependency, not a peer dependency, meaning that it will get installed along with react-flexbox-grid (no need to install it separately anymore).

Column reordering

You can now add first and last props to <Col> to alter column ordering:

<Grid>
  <Row>
    <Col xs={4} />
    <Col xs={4} last="md" />
    <Col xs={4} first="sm" />
  </Row>
</Grid>

The 3rd <Col> will be ordered first on tablet screens, and the 2nd <Col> will be ordered last on laptop screens. Thanks, @eemeli! #68

No more reverse prop

@kgregory realized that flexboxgrid, our upstream, has no reverse support for columns, so he got rid of that misleading property for <Col>. #98

TypeScript definitions

The support for TypeScript definitions has been added, thanks to @IRus. #74

Advanced composition

Thanks to @nathanstitt, you can now compose your components in a more advanced way, using props from <Col> and <Row>: #91

import React from 'react';
import { Row, Col, getRowProps, getColumnProps } from 'react-flexbox-grid';
// a component that accepts a className
import SomeComponent from 'some-package';

export default function MyComponent(props) {
  const colProps = getColumnProps(props);
  const rowProps = getRowProps(props);

  return (
    <form className={rowProps.className}>
      <SomeComponent classname={colProps.className} />
      <input value={props.value} onChange={props.onChange} />
    </form>
  );
}

MyComponent.propTypes = Object.assign({
  onChange: React.PropTypes.func.isRequired,
  value: React.PropTypes.string.isRequired,
}, Col.propTypes, Row.propTypes);  // Re-use existing Row and Col propType validations

// Can now be rendered as: <MyComponent end="sm" sm={8} value="my input value" onChange={...} />

As stated in #10, this will warn users about installing classnames before proceeding.

added feature from #8