react-flexbox-grid-modern

A modernized fork of react-flexbox-grid consisting of React components that implement flexboxgrid.css. This version supports React 18+, Node 20+, and modern build tooling (Webpack 5, Vite, etc.).

Installation

npm install --save react-flexbox-grid-modern

Usage

You can import components directly:

import React from 'react';
import { Grid, Row, Col } from 'react-flexbox-grid-modern';

const App = () => (
  <Grid fluid>
    <Row>
      <Col xs={12} md={6}>
        Hello, world!
      </Col>
      <Col xs={12} md={6}>
        <div style={{ background: 'blue', color: 'white' }}>Column 2</div>
      </Col>
    </Row>
  </Grid>
);

export default App;

CSS Configuration

Using Dist (Easiest)

If you don't want to configure loaders, you can import the pre-bundled CSS:

import 'react-flexbox-grid-modern/dist/react-flexbox-grid.css';

Using Source (CSS Modules)

The components attempt to use CSS Modules for class isolation. Ensure your bundler is configured to handle .css imports.

Differences from Original

• React 18 Support: Dependencies updated for React 18 compatibility.
• Modernized Build: Switched to Webpack 5 and Dart Sass.
• Testing: Migrated to Vitest and React Testing Library.

License

MIT