devs-react-box

Flex, Grid, Container

Box

Props	Values	Default
justifyContent	string	center
alignItems	"flex-start" , "flex-end" , "center" , "baseline" , "stretch"	center
alignContent	"flex-start" , "flex-end" , "center" , "space-between" , "space-around" , "stretch"	null
width	string eg: 20px	100%
height	string eg: 20px	100%
textAlign	"left" , "right" , "center" , "justify" , "inherit"	center
wrap(fle-wrap)	"nowrap" , "wrap" , "wrap-reverse"	wrap
direction(flex-direction)	row, row-reverse, column, column-reverse	row
margin	string. Eg: 20px	0
pad(padding)	string	0
bgColor(background-color)	string	transparent

Usage

    import { Components, ThemeTypes } from "devs-react-box"
    
    const theme: ThemeTypes = {
        palette: {
            Blue: {
                dark: {
                    5: '#F2F6FA'
                },
            },
        };
        // shadows,
        // typography,
        // zIndex,
        // shape,
        // fontSizes,
    };
    const { Flex } = Components(theme)

   const App = () => (
        <Flex
            justifyContent="center"
            bgColor='Blue.dark.5'
            // ...other propps if needed
        >
            This is a div
        </Flex>
   )

Grid

Props	Values	Default
columns(grid-template-columns)	string	1fr
rows(gird-template-rows)	string	auto
gap(grid-gap)	string	10px
justifyContent	string	center
alignItems	"flex-start" , "flex-end" , "center" , "baseline" , "stretch"	center
width		100%

Usage

    import { Components, ThemeTypes } from "devs-react-component-library"

    const theme: ThemeTypes = {
        // palette: 
        // shadows,
        // typography,
        // zIndex,
        // shape,
        // fontSizes,
    };
    const { Grid } = Components(theme)

   const App = () => (
        <Grid
            row="1fr 1fr"
            // ...other propps if needed
        >
            This is a div
        </Grid>
   )

   

Container

Props	Values	Default
width	string eg: 20px	100%
height	string eg: 20px	100%
textAlign	"left" , "right" , "center" , "justify" , "inherit"	center
margin	string. Eg: 20px	0
pad(padding)	string	0
bgColor(background-color)	string	transparent

Usage

     import { Components, ThemeTypes } from "devs-react-component-library"
    
    const theme: ThemeTypes = {
        palette: {
            read:   '#F2F6FA' 
        };
        // shadows,
        // typography,
        // zIndex,
        // shape,
        // fontSizes,
    };
    const { Grid } = Components(theme)


    const App = () => (
        <Container
            width="50px"
            bgColor='read'
            // ...other propps if needed
        >
            This is a div
        </Container>
    )