smakosh / React Flex Ready
Licence: mit
A Flexbox grid ready, easy to implement and customize
Stars: ✭ 23
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Flex Ready
Griz
Grid library for React; Rescue the cat
Stars: ✭ 99 (+330.43%)
Mutual labels: grid, grid-system, flexbox
gutter-grid
A Sass flexbox based grid system that is able to replicate CSS grid-gap in IE11
Stars: ✭ 18 (-21.74%)
Mutual labels: grid, flexbox, grid-system
Griddd
A dead simple, customisable, flexbox-based griddd
Stars: ✭ 108 (+369.57%)
Mutual labels: grid, grid-system, flexbox
Pintsize
Customisable 💪 Flexbox grid system
Stars: ✭ 330 (+1334.78%)
Mutual labels: grid, grid-system, flexbox
flexboxes
CSS flexbox framework with pure flexbox grid ability
Stars: ✭ 27 (+17.39%)
Mutual labels: grid, flexbox, grid-system
Katana
Katana is CSS Layout System made with Flexbox
Stars: ✭ 57 (+147.83%)
Mutual labels: grid, flexbox
gymnast
🤸 Configurable grid and layout engine for React
Stars: ✭ 35 (+52.17%)
Mutual labels: grid, flexbox
React Tabulator
React Tabulator is based on tabulator - a JS table library with many advanced features.
Stars: ✭ 295 (+1182.61%)
Mutual labels: component, grid
grd-sass
Sass port of 1000ch/grd that is a CSS grid framework using Flexbox.
Stars: ✭ 12 (-47.83%)
Mutual labels: grid, flexbox
React Flexview
A powerful React component to abstract over flexbox and create any layout on any browser
Stars: ✭ 276 (+1100%)
Mutual labels: grid, flexbox
Grassy
Build layout through ASCII art in Sass (and more). No pre-built CSS. No additional markup.
Stars: ✭ 335 (+1356.52%)
Mutual labels: grid, grid-system
workshop-css-grid
Workshop made for freecodecamp meetup
Stars: ✭ 12 (-47.83%)
Mutual labels: grid, flexbox
vue-grid
A powerful flexbox grid system for Vue.js 2.x, built with inline-styles
Stars: ✭ 23 (+0%)
Mutual labels: grid, flexbox
ReactSimpleFlexGrid
A way to quickly add a Grid Layout to your React app 🚀
Stars: ✭ 185 (+704.35%)
Mutual labels: grid, flexbox
Tabulator
Interactive Tables and Data Grids for JavaScript
Stars: ✭ 4,329 (+18721.74%)
Mutual labels: grid, grid-system
React Native Responsive Grid
Bringing the Web's Responsive Design to React Native
Stars: ✭ 369 (+1504.35%)
Mutual labels: grid, flexbox
React Datasheet
Excel-like data grid (table) component for React
Stars: ✭ 4,866 (+21056.52%)
Mutual labels: component, grid
Flex Layout
Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API
Stars: ✭ 5,705 (+24704.35%)
Mutual labels: grid, flexbox
fortune
🔮Fortune is your friendly CSS properties framework.
Stars: ✭ 16 (-30.43%)
Mutual labels: grid, flexbox
react-flex-ready
Getting started
npm i react-flex-ready
Or
yarn add react-flex-ready
Props
Flex
These docs are inspired by reactjs-popup docs
| Option | Default | Type | Description |
|---|---|---|---|
| align | center | {string} | The way you want to align your items (align-items) |
| justifyContent | space-between | {string} | |
| col | {number} | depends if you have like 5 elements and each one takes 4 out of 12 of space, will explain this more on a blog post | |
| colTablet | {number} | Same as col but on Tablet | |
| colMobile | {number} | Same as col but on Mobile | |
| gap | 1 | {number} | Gap applies between elements, use it only when you have like 5 elements and each one takes 4 out of 12 of space, to be documented better. |
| gabTablet | 1 | {number} | Same as gap but for tablet |
| gapMobile | 1 | {number} | Same as gap but for mobile |
| as | div | {string, Component} | https://www.styled-components.com/docs/api#as-polymorphic-prop |
| className | {string} | you can add a className and style the component the way you wish | |
| style | {object} | you can pass in CSS in JS directly |
Item
| Option | Default | Type | Description |
|---|---|---|---|
| gap | 1 | {number} | The gap value between your elements, 1 is highly recommended (it's not valid when your element takes 12 out of 12 of space) |
| gabTablet | 1 | {number} | Same as gap but for tablet |
| gapMobile | 1 | {number} | Same as gap but for mobile |
| col | 1 | {number} | How many columns out of 12 your item will take on desktop |
| colTablet | 1 | {number} | How many columns out of 12 your item will take on tablet |
| colMobile | 1 | {number} | How many columns out of 12 your item will take on mobile |
| marginBottom |
10px on mobile |
{number} | Margin bottom of your item, last item always has 0 on mobile |
| stretch | false | {bool} | Whether you want the items to have the same height or not |
| as | div | {string, Component} | https://www.styled-components.com/docs/api#as-polymorphic-prop |
| className | {string} | you can add a className and style the component the way you wish | |
| style | {object} | you can pass in CSS in JS directly |
Built with
- React & Styled-components
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Contributors
Todo
- [x] convert CSS in JS to vanilla CSS and remove styled-components
CSS only alternative: https://codepen.io/Smakosh/pen/JjXpamp
- [x] Migrate to TypeScript
Support
If you love this React component and want to support me, you can do so through my Patreon or GitHub sponsors.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].