Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/a-tokyo/react-native-flex-grid
🎨 A react-native flexbox grid similar to bootstap's web grid.
https://github.com/a-tokyo/react-native-flex-grid
12-columns awesome bootstrap configurable customizable design expo flexbox flowtype grid layout n-columns netlify react react-native react-native-web storybook style typescript
Last synced: about 4 hours ago
JSON representation
🎨 A react-native flexbox grid similar to bootstap's web grid.
- Host: GitHub
- URL: https://github.com/a-tokyo/react-native-flex-grid
- Owner: a-tokyo
- License: mit
- Created: 2022-12-27T02:20:18.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-18T10:04:38.000Z (4 months ago)
- Last Synced: 2024-09-14T10:10:55.569Z (19 days ago)
- Topics: 12-columns, awesome, bootstrap, configurable, customizable, design, expo, flexbox, flowtype, grid, layout, n-columns, netlify, react, react-native, react-native-web, storybook, style, typescript
- Language: TypeScript
- Homepage: https://a-tokyo.github.io/react-native-flex-grid
- Size: 4.54 MB
- Stars: 36
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
# react-native-flex-grid
A react-native flexbox grid similar to [bootstap](https://getbootstrap.com)'s web grid.
Check the [DEMO](https://react-native-flex-grid.netlify.app), built with [Storybook](https://storybook.js.org) and [react-native-web](https://necolas.github.io/react-native-web).
# Getting Started
## Installation
NPM:
```bash
npm install --save react-native-flex-grid
```
YARN:
```bash
yarn add react-native-flex-grid
```
## Usage
```jsx
import { Container, Row, Col } from 'react-native-flex-grid';
const MyComponent = (
.col
.col
.col
.col
.col
.col-3
.col-auto - variable width content
.col-3
.col-6
.col-6
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-sm-4
.col-sm-5 .order-sm-2 .offset-sm-1
.col-sm-5 .order-sm-1 .offset-sm-1
.col-sm-12 .col-md-6 .offset-md-3
.col-sm-auto .offset-sm-1
.col-sm-auto .offset-sm-1
);
export default MyComponent;
```
#### Component Props - can be used to customize Layout components
Container
```tsx
export declare interface ContainerProps
extends React.ComponentProps {
/** Fluid Container */
fluid?: boolean;
/** No Padding */
noPadding?: boolean;
/** Element to render - defaults to View */
Element?: React.ElementType;
}
```
Row
```tsx
export declare interface RowProps extends React.ComponentProps {
/** Gutter size -- [Bootstrap Gutters](https://getbootstrap.com/docs/5.0/layout/gutters/) */
gx?: 0 | 1 | 2 | 3 | 4 | 5;
/** Direction */
dir?: 'ltr' | 'rtl';
/** Element to render - defaults to View */
Element?: React.ElementType;
}
```
Col
```tsx
export declare interface ColProps extends React.ComponentProps {
/** xs size */
xs?: number | string;
/** sm size */
sm?: number | string;
/** md size */
md?: number | string;
/** lg size */
lg?: number | string;
/** xl size */
xl?: number | string;
/** xs offset */
xsOffset?: number | string;
/** sm offset */
smOffset?: number | string;
/** md offset */
mdOffset?: number | string;
/** lg offset */
lgOffset?: number | string;
/** xl offset */
xlOffset?: number | string;
/** xs order */
xsOrder?: number | string;
/** sm order */
smOrder?: number | string;
/** md order */
mdOrder?: number | string;
/** lg order */
lgOrder?: number | string;
/** xl order */
xlOrder?: number | string;
/** Gutter size -- [Bootstrap Gutters](https://getbootstrap.com/docs/5.0/layout/gutters/) */
gx?: 0 | 1 | 2 | 3 | 4 | 5;
/** Direction */
dir?: 'ltr' | 'rtl';
/** Element to render - defaults to View */
Element?: React.ElementType;
}
```
### Modifying Grid Configuration
The grid is 100% modifiable, checkout the [detailed docs](https://react-native-flex-grid.netlify.app/?path=/story/utils-grid--page)
### Responsive utils
Checkout the [detailed docs](https://react-native-flex-grid.netlify.app/?path=/story/utils-responsive--page) for a set of useful responsive utilities like css/scss like media queries.
### Development
Checkout the [detailed docs](https://react-native-flex-grid.netlify.app/?path=/story/development--page) to understand how to run the repo locally and how to develop with it.
### Helpful resources
- [Blogpost](https://www.notion.so/ahmedtokyo/React-Native-Flex-Grid-6932aa014d274ae7940595664873b7dd)
- [Bootstrap layout documentation](https://getbootstrap.com/docs/5.0/layout)
- [Reactstrap layout documentation](https://reactstrap.github.io/?path=/docs/components-layout--layout)
- [React Native Extended StyleSheet](https://github.com/vitalets/react-native-extended-stylesheet)
### Contributing
Pull requests are highly appreciated! For major changes, please open an issue first to discuss what you would like to change.