Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jbetancur/react-flexybox
Flexbox in React made simple
https://github.com/jbetancur/react-flexybox
css demo flex-box flex-items flexbox react react-flexbox
Last synced: 2 months ago
JSON representation
Flexbox in React made simple
- Host: GitHub
- URL: https://github.com/jbetancur/react-flexybox
- Owner: jbetancur
- License: mit
- Created: 2017-08-30T21:26:00.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-22T12:53:09.000Z (almost 2 years ago)
- Last Synced: 2024-10-09T17:17:44.924Z (2 months ago)
- Topics: css, demo, flex-box, flex-items, flexbox, react, react-flexbox
- Language: JavaScript
- Homepage: https://react-flexybox-demo.netlify.com/
- Size: 2.16 MB
- Stars: 9
- Watchers: 3
- Forks: 0
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Flexy Box
React flexy box is a simple to use flexbox system for your React project based on the original [flexybox library](https://github.com/jbetancur/flexybox)
If you've used the bootstrap layout system, then react-flexybox should be relatively familiar.
* Straight forward and familiar API for controlling your layout
* built with [styled-components](https://github.com/styled-components/styled-components) - no css/scss means no need to add special loaders/config
* based off actual uses cases in production apps
## Live Demo
https://react-flexybox-demo.netlify.com/
## Browser Support
```
"Chrome >= 48",
"Firefox >= 44",
"Firefox ESR",
"Safari >= 9.1",
"Edge >= 12",
"ios_saf >= 9.3",
"ie 11"
```
## Installation
dependencies: react 15+, styled-components 3+
```
npm install react-flexybox styled-components
```
or
```
yarn add react-flexy-box styled-components
```
## API
### ``
Optional wrapper
| prop | type | values | default | description |
|---------- |:------------------: |-------- |--------- | --------------------------------------------------------------------------------- |
| fluid | boolean | | false | true: sets content to 100% of page width \| false: sets a max-width for content |
| className | string | | | set the className on the Container Element |
| style | object | | | set the style on the Container Element |
| component | function \| string | | `div` | The component to render the Container as |
### ``
Row wraps Cols
| prop | type | values | default | description |
|---------------- |:-------: |------------------------------------------------------------------------------------ |------------ | ----------- |
| gutter | number | | 0 |
| columnDivision | integer | | 12 | allows columns divisions to be overidden (i.e. 24 = smaller columns than 12)
| minColWidths | number | | | override the minWidth for all Cols within the Row
| wrap | string | `nowrap \| wrap \| wrap-reverse` | wrap | whether flex items should wrap when the window is resized
| direction | string | `row \| row-reverse \| column \| column-reverse` | row |
| justifyContent | string | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | flex-start | justityContent aligns the items inside a flex container along the x axis
| alignContent | string | `flex-start \| flex-end \| center \| baseline \| stretch` | stretch | alignContent aligns the whole structure according to its value and has no effect when items are in a single line
| alignItems | string | `flex-start \| flex-end \| center \| space-between \| space-around \| stretch \| baseline` | stretch | alignItems aligns the items inside a flex container along the y axis just like justifyContent does along the x axis
| className | string | | | set the className on the Row Element |
| style | object | | | set the style on the Row Element |
| debug | boolean | | false | adds bounding boxes to help debug layout issues |
| height | string | | | allows setting the Row height e.g. `height="100px"` |
| component | function \| string | | `div` | The component to render the Row as |
| center | boolean | | false | shortcut to center child `Col` items horizontally and vertically |
| fill | boolean | | false | shortcut that sets `Row` to `height: 100%` - *(overrides 'height')* |
| padding | string | | 0 | sets padding on `Row` |
| paddingTop | string | | 0 | sets padding-top on `Row` |
| paddingLeft | string | | 0 | sets padding-left on `Row` |
| paddingBottom | string | | 0 | sets padding-bottom `Row` |
| paddingRight | string | | 0 | sets padding-right on `Row` |
* `` sets child `Col` flex items to margin of 4px and all min-widths to 100px within `Row`
* `` center justifies child `Col` flex items horizontally within the `Row`
* `` center justifies child `Col` flex items horizontally and vertically within the `Row`
### ``
Flex Items
| prop | type | values | default | description |
|---------- |:------------------: |-------------------------------------------------------------------- |---------------------- |-------------------------------------------- |
| order | integer | | 0 | set the order of flex items |
| alignSelf | string | `auto \| flex-start \| flex-end \| center \| baseline \| stretch` | auto | center the alignments for one of the items inside a flexible element |
| flex | boolean \| number | | `false \| 1-12` | sets the default flex size |
| xs | number | | `1-12` | 0 - 599px |
| sm | number | | `1-12` | 600 - 959px |
| md | number | | `1-12` | 960px - 1280px |
| lg | number | | `1-12` | 1280px or greater |
| className | string | | | set the className on the Col Element |
| style | object | | | set the style on the Col Element |
| component | function \| string | | `div` | The component to render the Col as |
* `` sets the default flex size
* `` sets the item to auto stretch
* `` xs (xs, sm, md, or lg) used togther with flex - you can easily set a default flex size for any size other than the xs breakpoint
* ` ... ` The last Col will be ordered as first
* values for flex ranges are dependent on columnDivisions
## Basic Usage
```
import { Container, Row, Col } from 'react-flexybox';
```
### UMD Usage
```
...
...
// ES6
const {
Container,
Row,
Col,
} = ReactFlexyBox;
//ES Old School
var Container = ReactFlexyBox.Container;
var Row = ReactFlexyBox.Row;
var Col = ReactFlexyBox.Col;
```
## Supported Browsers
react-flexybox is supports on browsers that support flex. It will be up to you to set your autoprefixing appropriatly especially if you use IE 11
[Supported Browsers](https://caniuse.com/#search=flex)
# Contributing
* `npm install yarn jest -g`
* `yarn build-all` to generate dist
* `yarn build-demo` to generate/update demo
## Scripts
* `yarn build` - produces production version of your library under the `dist` folder
* `yarn build-all` - produces production & dev version of your library under the `dist` folder
* `yarn dev` - produces development version of react-flexybox and runs a watcher
* `yarn test` - runs the tests
* `yarn test:watch` - same as above but in a watch mode
* `yarn demo:build` - builds the demo
# Built with react-flexybox
* [Galactic Fog's Gestalt Platform](http://www.galacticfog.com/)
# Inspiration
* https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* https://v4-alpha.getbootstrap.com/