Releases: roylee0704/react-flexbox-grid
v1.0.0
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={...} />
move npm package: classnames as peerDependencies.
As stated in #10, this will warn users about installing classnames
before proceeding.
custom tag names
added feature from #8