sricho / react-flexboxgrid Goto Github PK

Please rebuild package for npm for applied prop-types (5ef43a2)

This package really needs some tests. Shame, shame, shame.

I need to set a min-height of a <GridRow> and I it would be nice beeing able to do that without to fallback on "divities".
See my PR for a possible implementation.

I'd be happy to contribute to this project, however you are missing many options from flexboxgrid, and your components are not normalized.

Typically, all grid systems use this format

<Grid>
  <Row>
    <Col />
  </Row>
</Grid>

Where a Grid has a container class and may be fluid. Etc.

Would you be ok if I submit a PR to fix this? I can simply add the missing components, leaving the existing ones there and mark them as deprecated at best. The point is to allow supporting all the features of flexboxgrid, and am I not happy with how react-flexbox-grid depends on Webpack. There is really no need for yet another wrapper...

It seems that flexboxgrid stays undefined when I import your library.
import flexboxgrid from "flexboxgrid/dist/flexboxgrid.css";

I use postCss with some loaders and wonder, which loader is needed to get your lib running.
I saw postcss-js as dependency, but it's not used in your webpack config.

Could you explain which loader is needed?

The issue with Meteor is that, while it does import the CSS as a style tag to the document, the exported module is simply a STYLE DOM element, and using the components in Meteor + React does not work, resulting in <div class=" ">...</div> elements to be created (instead lf <div class="row">...</div>).

My suggestion would be to temporarily implement a CSS map adapter to assign CSS classes to the elements depending on the selected "mode".

For example

import FlexboxGrid from 'react-flexboxgrid';
import { standardStyles, cssModuleStyles } from 'react-flexboxgrid/lib/adapters';

FlexboxGrid.styleAdapter = standardStyles;
// or
FlexboxGrid.styleAdapter = cssModuleStyles;

By default, the adapter used is cssModuleStyles.

standardStyles

Simply is an identity function :

import 'flexboxgrid/dist/flexboxgrid.css';

export default function (className) { return className; }

cssModuleStyles

Returns the styles loader class name :

import flexboxgrid from 'flexboxgrid/dist/flexboxgrid.css';

export default function (className) { return flexboxgrid[className]; }

Then simply use the defined adapter in each component.

Come on stu!