Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryu-man/reactjs-layouts
Easily structure your React app using CSS Flexbox & Grid declarative components
https://github.com/ryu-man/reactjs-layouts
css css-flexbox css-grid flexbox flexbox-layout grid grid-layout html layout react
Last synced: 19 days ago
JSON representation
Easily structure your React app using CSS Flexbox & Grid declarative components
- Host: GitHub
- URL: https://github.com/ryu-man/reactjs-layouts
- Owner: ryu-man
- License: mit
- Created: 2021-02-16T23:28:46.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-02-25T18:58:10.000Z (almost 4 years ago)
- Last Synced: 2024-10-01T21:18:34.729Z (3 months ago)
- Topics: css, css-flexbox, css-grid, flexbox, flexbox-layout, grid, grid-layout, html, layout, react
- Language: TypeScript
- Homepage:
- Size: 698 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Layouts
This project is an implementation of css Flexbox & Grid for [React](https://reactjs.org/) library
## Install
```bash
// npm
npm install reactjs-layouts
// yarn
yarn add reactjs-layouts
```
## Get started
Layouts have three main components: Row, Col (Column) and Grid.
_Note: react-layouts support type definitions_
## Row / Col
```js
import { Row, Col } from 'reactjs-layouts'
const Component = ()=>{
return (
<>
// control how elements are positioned horizontally
>
)
}
```
| Prop | Type |
| -------------- | ------- |
| justifyContent | string |
| alignItems | string |
| alignContent | string |
| wrap | string |
| inline | boolean |
| reverse | boolean |
| alignSelf | string |
| gap | string |
| fluid | string |
## Grid
```js
import { Grid } from 'reactjs-layouts'
const Component = ()=>{
return (
// Define the number & width of rows and columns
)
}
```
| Prop | Type |
| -------------- | ------- |
| templateCols | string |
| templateRows | string |
| templateAreas | string |
| colGap | string |
| rowGap | string |
| autoCols | string |
| autoRows | string |
| justifyContent | string |
| alignItems | string |
| alignContent | string |
| alignSelf | string |
| wrap | string |
| inline | boolean |
| reverse | boolean |
| fluid | string |
## Content
As You can use any HTML element in the content you can also use predefined items which let you have more control over the element directly
```jsx
import { Row } from 'reactjs-layouts'
const Component = ()=>{
return (
// Create div element
// can't control directly
// Create a div item
// you can use content props only
// Create a row item
// you can use Row props + content props
// Create a Col item
// you can use Column props + content props
// Create a grid item
// you can use Grid props + content props
)
}
```
### Row/Col Content Props
| Prop | Type |
| --------- | ------ |
| order | string |
| grow | string |
| shrink | string |
| basis | string |
| alignSelf | string |
```jsx
import { Grid } from 'reactjs-layouts'
const Component = ()=>{
return (
// Create div element, can't controls directly
// can't control directly
// Create a div item
// you can use content props only
// Create a row item
// you can use Row props + content props
// Create a column item
// you can use Column props + content props
// Create a grid item
// you can use Grid props + content props
)
}
```
## Grid Content Props
| Prop | Type |
| ----------- | ------- |
| justifySelf | string |
| alignSelf | string |
| colStart | string |
| colEnd | boolean |
| rowStart | boolean |
| rowEnd | string |
| col | string |
| row | string |
| area | string |
| fluid | string |
## License
svelte-layouts is [MIT Licenced](./LICENSE)
## Learn More
if you want to learn more about css flexbox and grid and how they works, you can feel free to check out these useful links:
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [Flexbox vs Grid](https://dev.to/nadayousry/grid-vs-flexbox-3fbh)