@m0nm/react-layout-lite v1.0.2

Description

a lightweight layout components built on flexbox

Install

npm i @m0nm/react-layout-lite --save

or

yard add @m0nm/react-layout-lite

Usage

there are two components you'll use: Container which is the parent. and Element which is the child.

Example

import {Container, Element} from "@monm/react-layout-lite'

function MyComponent() {

    return (
        // the "auto" prop will center the children vertically and horizontally
        <Container auto>
            <Element>
            <img src="cat.jpg" alt="cat" width="400" height="400"/>
            </Element>

           <Element>
           <h1>Welcome to my portfolio!</h1>
            </Element>
        </Container>


        <Container align="center" justify="between" column={3}>
            <Element>
                <h3>
                    CARD 1
                </h3>
            </Element>

           <Element>
                <h3>
                    CARD 2
                </h3>
            </Element>

           <Element>
                <h3>
                    CARD 3
                </h3>
            </Element>
        </Container>
    )
}

Documentation

Container:

Note: It is worth noting that Container will take the full width of it's parent.

All props are optional, If you set none the component will behave like flexbox default behaviour.

Note

regarding the column prop this will assign all the Element components width value to be 1/X where X is the number you assigned to column, Otherwise Element will take the full width of Container. However if you don't want to use the Element component you may use wrap or revese prop should it be needed.

Element:

All props are optional, If you set none the component will behave like flexbox child default behaviour.