React Flexbox Grid

Theme by Roylee0704

|

Updated: 7 Jan 2022

|

2935 Stars

A set of React components implementing flexboxgrid with the power of CSS Modules.

Categories

Overview:

React-flexbox-grid is a set of React components that implement flexboxgrid.css. It offers optional support for CSS Modules with some additional configuration. The package can be installed via npm and is designed to work well with tools like webpack or Meteor. Additionally, it provides isomorphic support and options for standalone usage without a bundler.

Features:

• Set of React components: Implements flexboxgrid.css.
• Optional CSS Modules support: Can be enabled with additional configuration.
• Easy installation via npm: Simple installation process.
• Isomorphic support: Ability to work with isomorphic applications.
• Standalone usage: Can be used without a bundler.
• Advanced composition options: Functions for generating Row and Column class names.

Installation:

To install react-flexbox-grid as an npm package, you can follow these steps:

1. Install style-loader and css-loader as development dependencies:

npm install style-loader css-loader --save-dev

2. Set up a loader for flexboxgrid with CSS Modules enabled in your webpack configuration:

{
    test: /\.css$/,
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                modules: true
            }
        }
    ],
    exclude: /flexboxgrid/
}

3. If you are not using a bundler, you can use the pre-bundled build located in the dist directory, which includes a single UMD JS distributable and built CSS file.

Summary:

React-flexbox-grid is a versatile set of React components that simplify the implementation of flexboxgrid.css in your projects. With features like optional CSS Modules support, isomorphic compatibility, and standalone usage options, it offers flexibility and ease of use. By following the installation guide provided, developers can quickly integrate this package into their applications for efficient layout management.