Layouts

This project is an implementation of css Flexbox & Grid for React library

Install

// 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

    import { Row, Col } from 'reactjs-layouts'

    const Component = ()=>{
        return (
            <>
                // control how elements are positioned horizontally
                <Row justifyContent="space-between"></Row>
                
                <Col></Col>
            </>
        )
    }

Prop	Type
justifyContent	string
alignItems	string
alignContent	string
wrap	string
inline	boolean
reverse	boolean
alignSelf	string
gap	string
fluid	string

Grid

    import { Grid } from 'reactjs-layouts'

    const Component = ()=>{
        return (
            // Define the number & width of rows and columns
            <Grid templateRows="auto" templateCols="20vw 1fr"></Grid>
        )
    }

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

import { Row } from 'reactjs-layouts'

const Component = ()=>{
    return (
        <Row>
            // Create div element
            // can't control directly
            <div></div>

            // Create a div item
            // you can use content props only
            <Row.item></Row.item>

            // Create a row item
            // you can use Row props + content props
            <Row.row></Row.row>

            // Create a Col item
            // you can use Column props + content props
            <Row.col></Row.col>

            // Create a grid item
            // you can use Grid props + content props
            <Row.grid></Row.grid>
        </Row>
    )
}

Row/Col Content Props

Prop	Type
order	string
grow	string
shrink	string
basis	string
alignSelf	string

    import { Grid } from 'reactjs-layouts'

    const Component = ()=>{
        return (
            <Grid>
                // Create div element, can't controls directly
                // can't control directly
                <div></div>
            
                // Create a div item
                // you can use content props only
                <Grid.item></Grid.item>
            
                // Create a row item 
                // you can use Row props + content props
                <Grid.row></Grid.row>
            
                // Create a column item
                // you can use Column props + content props
                <Grid.col></Grid.col>
            
                // Create a grid item 
                // you can use Grid props + content props
                <Grid.grid></Grid.grid>
            </Grid>
        )
    }

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

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
• A Complete Guide to Grid
• Flexbox vs Grid