Sito Container

Super flexible container, very similar to @mui's Box, but defaults to flex

How to use it?

import SitoContainer from "sito-container";

function App() {
    return {
        <SitoContainer>
            Hola Mundo
        </SitoContainer>
    }
}

You can change the name of the container, if you don't like its name 😂

import SitoContainer as Container from "sito-container";

function App() {
    return {
        <Container>
            Hola Mundo
        </Container>
    }
}

You can add your css rules, like sx prop for styled-component, style prop like inline css styles and classNames from your css files

import SitoContainer as Container from "sito-container";

function App() {
    return {
        <Container sx={{ width: "350px", height: "350px" }}>
            Hola Mundo
        </Container>
    }
}

Props

| Name | Type | Default | Description | | | -------------- | ----------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | | id | string | | html identifier | | | name | string | | html name | | | className | string | | css class name | | | background | string | | container background | | | display | string | "flex" | The CSS display property specifies whether an element is treated as a block or inline element and the layout used by its children, such as flow layout, grid, or flex. | | | flexDirection | string | "row" | The flex-direction CSS property specifies how to place flex objects in the flex container by defining the main axis and direction (normal or upside down). | | | alignItems | string | "left" | The align-items CSS property sets the value align-self on all direct descendants of a group. | | | justifyContent | string | "left" | The justify-content CSS property defines how the browser allocates space between and around flex items, along the main axis of their container. | | | children | node | | node children | | | fullWidth | bool | false | if on, width will be set to "100%", otherwise "inherit" | | ignoreDefault | bool | false | if on, all props and default styles will be ignored | | | extraProps | Array<func| object| bool>| func| object | | extra props like: onClick, onMouseEnter, etc | | | sx | Array<func| object| bool>| func| object | | The system prop that allows defining system overrides as well as additional CSS styles. See the sx page for more details. | | | style | Array<func| object| bool>| func| object | | inline css | |

🙌 Good luck out there my friend 🙌