https://github.com/oze4/react-flexbox-slim

Flexbox in React but slim
https://github.com/oze4/react-flexbox-slim

Last synced: 2 months ago
JSON representation

Flexbox in React but slim

• Host: GitHub
• URL: https://github.com/oze4/react-flexbox-slim
• Owner: oze4
• Created: 2020-03-26T04:48:12.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T17:14:09.000Z (about 2 years ago)
• Last Synced: 2023-12-27T09:04:02.894Z (about 1 year ago)
• Language: JavaScript
• Size: 666 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-flexbox-slim

[![NPM](https://nodei.co/npm/react-flexbox-slim.png?compact=true)](https://nodei.co/npm/react-flexbox-slim/)

### Customizable flexbox grid system for React

 - [Installation](#installation)

 - [Import Information](#important-information)

 - [Defaults](#defaults)

 - [Examples](#examples)

 - [Components and Properties](#Components-and-Properties)

---

## Installation

`npm install --save react-flexbox-slim`

---

## Important Information

 - 12 column grid system by default

 - Utilizing the `` component/wrapper, you can fully customize the grid system (number of columns and breakpoints)

 - The `` component uses the Context API to pass down any customization

 - See the [examples](#examples) for more information

 - We provide `esm` and `umd` modules

   - By default, `esm` is imported

   - To import `umd` use: 

   ```javascript

   const { Row, Column } = require('react-flexbox-slim/lib/bundle.umd.js')

   ```

---

## Defaults

```javascript

// breakpoints

{

  xs: '0px',

  sm: '600px',

  md: '960px',

  lg: '1280px',

  xl: '1920px',

}

```

```javascript

// maxColumns

12

```

---

## Examples

```javascript

// Basic 12 column grid system, using defaults

  

    
Hello,

  

  

    
World!

  


```

```javascript

// Customized grid system

const customBreakpoints = {

  xs: '0px',

  sm: '500px',

  md: '800px',

  lg: '1000px',

  xl: '1600px',

};

const customMaxColumns = 16;

  

    /* Now you can use 16 column grid system */

    

        
Hello,

    

    

        
World!

    

  


```

---

## Components and Properties

| Component | Props |

| --- | --- |

| <Grid> | [See here for Grid props](#grid-props) |

| <Row> | NameTypeDefaultOne OfdirectionString'row'


'row'

'row-reverse'

'column'

'column-reverse'

wrapString'wrap'


'nowrap'

'wrap'

'wrap-reverse'

justifyContentString'flex-start'


'flex-start'

'flex-end'

'center'

'space-between'

alignContentString'flex-start'


'flex-start'

'flex-end'

'center'

'space-between'

'space-around'

'space-evenly'

'stretch'

alignItemsString'flex-start'


'flex-start'

'flex-end'

'center'

'baseline'

'stretch'

 |

| <Column> | NameTypeDefaultxsNumber12smNumber12mdNumber12lgNumber12xlNumber12


### Grid Props

| Name | Type |

| --- | --- |

| `breakpoints` | Object (see below for shape) |

| `maxColumns` | Number |




 - **`breakpoints`**

If you wish to only change a single breakpoint value, you may do so. We will combine the default breakpoint values with the object you supplied 

***Note**: this may cause issues with media queries*

```javascript

// breakpoints prop must be of the following shape:

```




 - **`maxColumns`**

Allows you to specify the number of columns for the entire grid system

```javascript

```