sito-container

0.4.2 • Public • Published

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 🙌

Package Sidebar

Install

npm i sito-container

Weekly Downloads

3

Version

0.4.2

License

MIT

Unpacked Size

9.41 kB

Total Files

5

Last publish

Collaborators

  • sito8943