@quanda/react-box
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.4 • Public • Published

    @quanda/react-box

    A React component for rapid box modeling

    Built with TypeScript and styled-components

    Overview

    Box is simply an HTML div element. What makes it unique are it's available props which are semantically defined to enable rapid layouts using common box-model attributes such as padding, margin, position, and so on.

    Example: 12-column grid

    <Box
      grid
      gtc="repeat(12, minmax(0, 1fr))"
      p='2em'
    >
      {props.children}
    </Box>

    Installation via NPM

    npm install @quanda/react-box

    Usage

    Basic Flexbox example

    import { Box } from '@quanda/react-box';
    
    const BoxDemo = () => {
      return (
        <Box
          flex
          ai='center'
          jc='space-between'
          maxw='720px'
          m='auto'
        >
          <span>A</span>
          <span>B</span>
          <span>C</span>
        </Box>
      )
    }
    
    export default BoxDemo;

    Available Props

    Note that many of the props are defined twice in order to allow for both shorthand and verbose usage. For example, the CSS property display can be set using either the d or display prop.

    Full props list (with types)

    {
      className?: string;
      children: JSX.Element[] | JSX.Element;
      d?: string;
      display?: string;
      h?: string;
      height?: string;
      minh?: string;
      minHeight?: string;
      maxh?: string;
      maxHeight?: string;
      w?: string;
      width?: string;
      minw?: string;
      minWidth?: string;
      maxw?: string;
      maxWidth?: string;
      pos?: string;
      position?: string;
      top?: string;
      bottom?: string;
      left?: string;
      right?: string;
      zi?: string;
      zIndex?: string;
      textAlign?: string;
      m?: string;
      margin?: string;
      mt?: string;
      marginTop?: string;
      mr?: string;
      marginRight?: string;
      mb?: string;
      marginBottom?: string;
      ml?: string;
      marginLeft?: string;
      p?: string;
      padding?: string;
      pt?: string;
      paddingTop?: string;
      pr?: string;
      paddingRight?: string;
      pb?: string;
      paddingBottom?: string;
      pl?: string;
      paddingLeft?: string;
      border?: string;
      borderRadius?: string;
      borderWidth?: string;
      flex?: boolean | string;
      row?: boolean;
      col?: boolean;
      fb?: string;
      flexBasis?: string;
      fw?: string;
      flexWrap?: string;
      fg?: string;
      flexGrow?: string;
      fs?: string;
      flexShrink?: string;
      ai?: string;
      alignItems?: string;
      ac?: string;
      alignContent?: string;
      als?: string;
      alignSelf?: string;
      ji?: string;
      justifyItems?: string;
      jc?: string;
      justifyContent?: string;
      js?: string;
      justifySelf?: string;
      gtc?: string;
      gridTemplateColumns?: string;
      gtr?: string;
      gridTemplateRows?: string;
      gar?: string;
      gridAutoRows?: string;
      gac?: string;
      gridAutoColumns?: string;
      gcs?: string;
      gridColumnStart?: string;
      gce?: string;
      gridColumnEnd?: string;
      gcg?: string;
      gridColumnGap?: string;
      grs?: string;
      gridRowStart?: string;
      gre?: string;
      gridRowEnd?: string;
      grg?: string;
      gridRowGap?: string;
      gg?: string;
      gridGap?: string;
      ga?: string;
      gridArea?: string;
      gc?: string;
      gridColumn?: string;
      gr?: string;
      gridRow?: string;
      scroll?: boolean;
      scrollY?: boolean;
      scrollX?: boolean;
    }
    

    Install

    npm i @quanda/react-box

    DownloadsWeekly Downloads

    1

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    22.8 kB

    Total Files

    15

    Last publish

    Collaborators

    • quanda