{"id":15392706,"url":"https://github.com/aaronvanston/react-flexa","last_synced_at":"2025-04-09T16:08:53.436Z","repository":{"id":19545934,"uuid":"87036958","full_name":"aaronvanston/react-flexa","owner":"aaronvanston","description":"Responsive React Flexbox (CSS Flexible Box Layout Module) grid system based heavily on the standard CSS API.","archived":false,"fork":false,"pushed_at":"2022-12-07T01:01:15.000Z","size":2795,"stargazers_count":133,"open_issues_count":30,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T19:58:02.415Z","etag":null,"topics":["breakpoint","css","flex","flexa","flexbox","grid","react","responsive","styled-components"],"latest_commit_sha":null,"homepage":"https://aaronvanston.github.io/react-flexa/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronvanston.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-03T04:07:06.000Z","updated_at":"2023-10-25T06:50:21.000Z","dependencies_parsed_at":"2023-01-11T20:30:09.048Z","dependency_job_id":null,"html_url":"https://github.com/aaronvanston/react-flexa","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronvanston%2Freact-flexa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronvanston%2Freact-flexa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronvanston%2Freact-flexa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronvanston%2Freact-flexa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronvanston","download_url":"https://codeload.github.com/aaronvanston/react-flexa/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065283,"owners_count":21041871,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["breakpoint","css","flex","flexa","flexbox","grid","react","responsive","styled-components"],"created_at":"2024-10-01T15:15:44.901Z","updated_at":"2025-04-09T16:08:53.417Z","avatar_url":"https://github.com/aaronvanston.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-flexa\n\n[![Build Status](https://travis-ci.org/aaronvanston/react-flexa.svg?branch=master)](https://travis-ci.org/aaronvanston/react-flexa) [![npm version](https://badge.fury.io/js/react-flexa.svg)](https://badge.fury.io/js/react-flexa) [![codecov](https://codecov.io/gh/aaronvanston/react-flexa/branch/master/graph/badge.svg)](https://codecov.io/gh/aaronvanston/react-flexa)\n\nResponsive React Flexbox (CSS Flexible Box Layout Module) grid system based heavily on the standard CSS API.\n\n## [react-flexa demo](https://aaronvanston.github.io/react-flexa)\n\n## Features\n\n- Simple API is based off [CSS Flexbox API](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes), no need to learn a new syntax.\n- Uses [styled-components](https://github.com/styled-components/styled-components) to customize generated components styles\n- Easily change grid settings based on responsive breakpoints\n\n## Installation\n\n```js\nyarn add react-flexa\n```\n\n## Usage\n\n### Basic usage\n\n```js\nimport React from 'react';\nimport { Row, Col } from 'react-flexa';\n\nclass Component extends React.Component {\n  render() {\n    return (\n      \u003cRow justifyContent=\"center\"\u003e\n        \u003cCol xs={3}\u003e25% width\u003c/Col\u003e\n        \u003cCol xs={3}\u003e25% width\u003c/Col\u003e\n      \u003c/Row\u003e\n    );\n  }\n};\n```\n\n### Advance responsive usage\n\nView [Responsive API using objects](#responsive-api-using-objects) for more information on how to responsively set flexbox properties based on breakpoint.\n\n```js\nimport React from 'react';\nimport { Row, Col } from 'react-flexa';\n\nclass Component extends React.Component {\n  render() {\n    return (\n      \u003cRow justifyContent={{ sm: \"center\", lg: \"flex-end\" }} gutter=\"16px\"\u003e\n        \u003cCol xs={3} md={6}\u003e25% width on extra small displays, 50% width on medium displays and up\u003c/Col\u003e\n        \u003cCol xs={3} md={6}\u003e25% width on extra small displays, 50% width on medium displays and up\u003c/Col\u003e\n      \u003c/Row\u003e\n    );\n  }\n};\n```\n\n## API\n\n### Row Props\n\nThese are the **available** and **reserved** props that can be used on the `Row` component. All other props such as `className` will be automatically be passed down to the generated element.\n\n| Prop             | Valid types                                                    | Valid values                                                                                         | Default value  | Description                                                                                                                                                                                                                                         |\n|:-----------------|:---------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------|:---------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `gutter`         | integer,\u003cbr\u003estring,\u003cbr\u003e[object](#responsive-api-using-objects) | `'1rem'`\u003cbr\u003e`'12px'`\u003cbr\u003e`4`\u003cbr\u003e(etc)                                                                 | `'1rem'`       | Sets the width of the gutter to be used between columns. For correct positioning you must set the same value (if custom) on children Col's.                                                                                                         |\n| `display`        | string,\u003cbr\u003e[object](#responsive-api-using-objects)             | `'flex'`\u003cbr\u003e`'inline-flex'`                                                                          | `'flex'`       | This defines a flex container; inline or block depending on the given value. [Read more about display.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-2)                                                                |\n| `flexDirection`  | string,\u003cbr\u003e[object](#responsive-api-using-objects)             | `'row'`\u003cbr\u003e`'row-reverse'`\u003cbr\u003e`'column'`\u003cbr\u003e`'column‑reverse'`                                       | `'row'`        | This establishes the main-axis\u003cbr\u003ethus defining the direction flex items are placed in the flex container. [Read more about flex-direction.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-3)                           |\n| `flexWrap`       | string\u003cbr\u003e[object](#responsive-api-using-objects)              | `'nowrap'`\u003cbr\u003e`'wrap'`\u003cbr\u003e`'wrap‑reverse'`                                                           | `'wrap'`     | By default\u003cbr\u003eflex items will wrap to new lines as needed. You can change it to allow all items try to fit onto one line with this property. [Read more about flex-wrap.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-4) |\n| `justifyContent` | string,\u003cbr\u003e[object](#responsive-api-using-objects)             | `'flex‑start'`\u003cbr\u003e`'flex‑end'`\u003cbr\u003e`'center'`\u003cbr\u003e`'space‑between'`\u003cbr\u003e`'space‑around'`                | `'flex‑start'` | This defines the alignment along the main axis. It helps distribute extra free space left over. [Read more about justify-content.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-6)                                     |\n| `alignItems`     | string,\u003cbr\u003e[object](#responsive-api-using-objects)             | `'flex‑start'`\u003cbr\u003e`'flex‑end'`\u003cbr\u003e`'center'`\u003cbr\u003e`'baseline'`\u003cbr\u003e`'stretch'`                          | `'stretch'` | This defines the default behavior for how flex items are laid out along the cross axis on the current line. [Read more about align-items.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-7)                             |\n| `alignContent`   | string,\u003cbr\u003e[object](#responsive-api-using-objects)             | `'flex‑start'`\u003cbr\u003e`'flex‑end'`\u003cbr\u003e`'center'`\u003cbr\u003e`'space‑between'`\u003cbr\u003e`'space-around'`\u003cbr\u003e`'stretch'` | `'stretch'` | This aligns a flex container's lines within when there is extra space in the cross-axis. [Read more about align-content.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-8)                                              |\n| `elementType`    | string,\u003cbr\u003e[object](#responsive-api-using-objects)             | `'div'`\u003cbr\u003e`'span'`                                                                                  | `'div'`        | This enables you to change the HTML element type generated.                                                                                                                                                                                         |\n\nFlexbox descriptions sourced from [CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\n### Col Props\n\nThese are the **available** and **reserved** props that can be used on the `Col` component. All other props such as `className` will be automatically be passed down to the generated element.\n\n| Prop          | Valid types                                                 | Valid values                                                                            | Default value | Description                                                                                                                                                                                                                                               |\n|:--------------|:------------------------------------------------------------|:----------------------------------------------------------------------------------------|:--------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `xs`          | integer/ string                                             | `0`-`12`\u003cbr\u003e(based on default columns)\u003cbr\u003e`hidden`\u003cbr\u003e`auto` \u003cbr\u003e `'390px'` - `'calc=(100% - 390px)'`         | nill          | **Number:** Sets the width of the col based the column configuration (12 by default) for the XS breakpoint and up.\u003cbr\u003e **String:** Set a width like string `xs=\"390px\"` to fixed have a fixed colum, or create a calc `xs=\"calc(100% - 390px)\"` base on sibling to have a responsive column.                                                                                                                                                    |\n| `sm`          | integer/ string                                             | `0`-`12`\u003cbr\u003e(based on default columns)\u003cbr\u003e`hidden`\u003cbr\u003e`auto` \u003cbr\u003e `'390px'` - `'calc=(100% - 390px)'`         | nill          | **Number:** Sets the width of the col based the column configuration (12 by default) for the SM breakpoint and up.\u003cbr\u003e **String:** Set a width like string `sm=\"390px\"` to fixed have a fixed colum, or create a calc `sm=\"calc(100% - 390px)\"` base on sibling to have a responsive column.                                                                                                                                                    |\n| `md`          | integer/ string                                             | `0`-`12`\u003cbr\u003e(based on default columns)\u003cbr\u003e`hidden`\u003cbr\u003e`auto` \u003cbr\u003e `'390px'` - `'calc=(100% - 390px)'`         | nill          | **Number:** Sets the width of the col based the column configuration (12 by default) for the MD breakpoint and up.\u003cbr\u003e **String:** Set a width like string `md=\"390px\"` to fixed have a fixed colum, or create a calc `md=\"calc(100% - 390px)\"` base on sibling to have a responsive column.                                                                                                                                                    |\n| `lg`          | integer/ string                                             | `0`-`12`\u003cbr\u003e(based on default columns)\u003cbr\u003e`hidden`\u003cbr\u003e`auto` \u003cbr\u003e `'390px'` - `'calc=(100% - 390px)'`         | nill          | **Number:** Sets the width of the col based the column configuration (12 by default) for the LG breakpoint and up.\u003cbr\u003e **String:** Set a width like string `lg=\"390px\"` to fixed have a fixed colum, or create a calc `lg=\"calc(100% - 390px)\"` base on sibling to have a responsive column.                                                                                                                                                    |\n| `gutter`      | integer, string,\u003cbr\u003e[object](#responsive-api-using-objects) | `'1rem'`\u003cbr\u003e`'12px'`\u003cbr\u003e`4`                                                             | `'1rem'`      | Sets the width of the gutter to be used between columns. For correct positioning you must set the same value (if custom) on the parent Row                                                                                                                |\n| `order`       | string,\u003cbr\u003e[object](#responsive-api-using-objects)          | `-1`\u003cbr\u003e`0`\u003cbr\u003e`1`\u003cbr\u003e(etc)                                                             | `0`           | By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container. [Read more about order.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-9) |\n| `alignSelf`   | string,\u003cbr\u003e[object](#responsive-api-using-objects)          | `'auto'`\u003cbr\u003e`'flex‑start'`\u003cbr\u003e`'flex‑end'`\u003cbr\u003e`'center'`\u003cbr\u003e`'baseline'`\u003cbr\u003e`'stretch'` | `'auto'`      | This allows the default alignment (or the one specified by align‑items) to be overridden for individual flex items. [Read more about align-self.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-14)                           |\n| `elementType` | string,\u003cbr\u003e[object](#responsive-api-using-objects)          | `'div'`\u003cbr\u003e`'span'`                                                                     | `'div'`       | This enables you to change the HTML element type generated.                                                                                                                                                                                               |\n| `flex` | string, integer,\u003cbr\u003e[object](#responsive-api-using-objects)          | `1`\u003cbr\u003e`'1 1 auto'`\u003cbr\u003e`'1 0 auto'`\u003cbr\u003e(etc).                                                                   | `0 0 auto`      | This allow to grow automatically (flex: 1)                                                                                                                               |\n| `display` | string,\u003cbr\u003e[object](#responsive-api-using-objects)          | `'flex'`\u003cbr\u003e`'block'`\u003cbr\u003e`'inline'`\u003cbr\u003e(etc)                                                                   | `block`      | This defines the display property of the col, inline, block, flex etc.                                                                                                                                                 |\n\nFlexbox descriptions sourced from [CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\n### Responsive API using objects\n\nProps with a valid type of \"object\" enable you to set the value corresponding to a breakpoint. Including an object with keys matching that of the breakpoints will set the desired value on that particular breakpoint.\n\nFor example, the object for setting a `Row` component setting `justifyContent` to \"flex-start\" on `sm` breakpoint, \"center\" on `md` breakpoint, and finally \"flex-end\" on `lg` breakpoint would look like:\n\n```js\n{\n  xs: \"flex-start\",\n  md: \"center\",\n  lg: \"flex-end\",\n}\n```\n\n**Note:** we have chosen to not change anything on the `sm` breakpoint.\n\nUsing this object in the example of the `Row` component:\n\n```js\nimport React from 'react';\nimport { Row, Col } from 'react-flexa';\n\nclass Component extends React.Component {\n  render() {\n    return (\n      \u003cRow justifyContent={{ xs: \"flex-start\", md: \"center\", lg: \"flex-end\" }}\u003e\n        ...\n      \u003c/Row\u003e\n    );\n  }\n};\n```\n\nThis will now generate CSS with `min-width` media queries for the responsive values. **Note:** a media query is not set for any value assigned to `xs` due to mobile first min-width media query structure.\n\n#### Default values when using responsive objects\n\nProps such as `gutter` by will use the default value from the ThemeProvider if not set within the object. For example:\n\n```js\n\u003cRow gutter={{ xs: 1, lg: 2 }} /\u003e\n```\n\nWill take the `sm` and `md` gutter values set by default in the ThemeProvider. To remove these simple set them as `0` to these within the responsive object.\n\n## Theming\n\n### Default Theme\n\nBy default the configuration for react-flex is:\n\n```js\n{\n  columns: 12,\n  gutter: {\n    xs: 1, // rem\n    sm: 1, // rem\n    md: 2, // rem\n    lg: 2, // rem\n  },\n  breakpoints: {\n    xs: 0, // rem\n    sm: 30, // rem\n    md: 48, // rem\n    lg: 60, // rem\n  },\n};\n```\n\n### Custom Theme\n\nYou can customize these values using the `\u003cThemeProvider /\u003e` component from `styled-components` and wrap your `App` with the modified values. **Note**: You **don't need to** include all values in the the new theme if you don't wish to overwrite them.\n\nIts important you use the key of `flexa` when applying the theme (as shown below).\n\n```js\nimport React from 'react';\nimport { ThemeProvider } from 'styled-components';\n\nconst customTheme = {\n  flexa: {\n    columns: 24,\n    gutter: {\n      xs: 2,\n      sm: 2,\n      md: 4,\n      lg: 4,\n    },\n    breakpoints: {\n      xs: 0,\n      sm: 50,\n      md: 60,\n      lg: 70,\n    },\n  }\n};\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cThemeProvider theme={customTheme}\u003e\n        ...\n      \u003c/ThemeProvider\u003e\n    );\n  }\n};\n```\n\n## Development\n\n### Requirements\n\n- [nvm](https://github.com/creationix/nvm) or [Node.js](https://nodejs.org/en/) 6 or later\n\n### Setup\n\n1. Install the version of Node specified in `.nvmrc` (optional):\n\n  ```shell\n  $ nvm install \u0026\u0026 nvm use\n  ```\n\n2. Install [Yarn](https://yarnpkg.com/en/):\n\n  ```shell\n  $ npm i -g yarn\n  ```\n\n3. Install the project's dependencies:\n\n  ```shell\n  $ yarn\n  ```\n\n### Usage\n\nDevelop with [Storybook](https://storybooks.js.org/):\n\n```shell\n$ yarn storybook\n```\n\nRun unit tests with [Jest](https://facebook.github.io/jest/):\n\n```shell\n$ yarn jest\n\n# Watch for changes\n$ yarn jest:watch\n```\n\nLint code with [ESLint](http://eslint.org/):\n\n```shell\n$ yarn lint\n```\n\n## License\n\n[MIT License](.github/LICENSE.md)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronvanston%2Freact-flexa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronvanston%2Freact-flexa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronvanston%2Freact-flexa/lists"}