@householdjs/elements v2.2.0-alpha.0

<FlexParent />

• props:

  alignItems?: string
  justifyContent?: string
  wrap?: boolean
  column?: boolean
  reverse?: boolean
  fillHeight?: boolean
  noFontSize?: boolean
  isInline?: boolean
  height?: string
  minHeight?: string
  background?: string
  backgroundColor?: string
  isRelative?: boolean
  withPointer?: boolean
  fullWidth?: boolean
  maxWidth?: string
  width?: string
  sTop?: boolean | 'big' | 'default' | 'small' | string
  sRight?: boolean | 'big' | 'default' | 'small' | string
  sBottom?: boolean | 'big' | 'default' | 'small' | string
  sLeft?: boolean | 'big' | 'default' | 'small' | string
  sAll?: boolean | 'big' | 'default' | 'small' | string
  sVertical?: boolean | 'big' | 'default' | 'small' | string
  sHorizontal?: boolean | 'big' | 'default' | 'small' | string
  withBottomMargin?: boolean | 'big' | 'default' | 'small' | string
  withTransition?: boolean | {
     transitionProperties?: string | Array<string>
     transitionOptions?: {
         timing?: string
         durationInMs?: number
         willChange?: boolean
     }
     disableTransitions?: boolean
  }

• common element attributes
• styled components props, e.g as => https://www.styled-components.com/docs/api

<FlexChild />

• props:

grow?: boolean | number
shrink?: boolean | number
flexBasis?: string
fullWidth?: boolean
noFontSize?: boolean
justifySelfEnd?: boolean
height?: string
minHeight?: string
background?: string
backgroundColor?: string
isRelative?: boolean
withPointer?: boolean
sTop?: boolean | 'big' | 'default' | 'small' | string
sRight?: boolean | 'big' | 'default' | 'small' | string
sBottom?: boolean | 'big' | 'default' | 'small' | string
sLeft?: boolean | 'big' | 'default' | 'small' | string
sAll?: boolean | 'big' | 'default' | 'small' | string
sVertical?: boolean | 'big' | 'default' | 'small' | string
sHorizontal?: boolean | 'big' | 'default' | 'small' | string
withTransition?: boolean | {
    transitionProperties?: string | Array<string>
    transitionOptions?: {
        timing?: string
        durationInMs?: number
        willChange?: boolean
    }
    disableTransitions?: boolean
}
+ common <div> element attributes
+ styled components props, e.g `as` => https://www.styled-components.com/docs/api

<SimpleWrapper />

• props:

  center?: boolean
  isInline?: boolean
  height?: string
  minHeight?: string
  background?: string
  backgroundColor?: string
  isRelative?: boolean
  withPointer?: boolean
  fullWidth?: boolean
  noFontSize?: boolean
  maxWidth?: string
  width?: string
  withBefore?: CSSObject
  withAfter?: CSSObject
  sTop?: boolean | 'big' | 'default' | 'small' | string
  sRight?: boolean | 'big' | 'default' | 'small' | string
  sBottom?: boolean | 'big' | 'default' | 'small' | string
  sLeft?: boolean | 'big' | 'default' | 'small' | string
  sAll?: boolean | 'big' | 'default' | 'small' | string
  sVertical?: boolean | 'big' | 'default' | 'small' | string
  sHorizontal?: boolean | 'big' | 'default' | 'small' | string
  withBottomMargin?: boolean | 'big' | 'default' | 'small' | string
  withTransition?: boolean | {
     transitionProperties?: string | Array<string>
     transitionOptions?: {
         timing?: string
         durationInMs?: number
         willChange?: boolean
     }
     disableTransitions?: boolean
  }

• common element attributes

• styled components props, e.g as => https://www.styled-components.com/docs/api

<Positioned />

• props:

  top?: boolean | string
  right?: boolean | string
  bottom?: boolean | string
  left?: boolean | string
  all?: boolean | string
  vertical?: boolean | string
  horizontal?: boolean | string
  zIndex?: number
  position?: 'absolute' | 'fixed' | 'relative'
  withTransition?: boolean | {
     transitionProperties?: string | Array<string>
     transitionOptions?: {
         timing?: string
         durationInMs?: number
         willChange?: boolean
     }
     disableTransitions?: boolean
  }

• common element attributes
• styled components props, e.g as => https://www.styled-components.com/docs/api

<Spacer />

• props:

  sTop?: boolean | 'big' | 'default' | 'small' | string
  sRight?: boolean | 'big' | 'default' | 'small' | string
  sBottom?: boolean | 'big' | 'default' | 'small' | string
  sLeft?: boolean | 'big' | 'default' | 'small' | string
  sAll?: boolean | 'big' | 'default' | 'small' | string
  sVertical?: boolean | 'big' | 'default' | 'small' | string
  sHorizontal?: boolean | 'big' | 'default' | 'small' | string

• common element attributes
• styled components props e.g as => https://www.styled-components.com/docs/api

<Image />

• props:

• common element attributes
• styled components props e.g as => https://www.styled-components.com/docs/api

• It's responsive by default. Fixed width is meant to be defined by it's wrapper, e.g.

<SimpleWrapper maxWidth="30px">
    <Image src="path_to_image">
</SimpleWrapper>

<Svg />

props:

   viewBoxSize?: number - must be defined if viewBoxWidth and viewBoxHeight are not
   viewBoxWidth?: number - must be defined if viewBoxSize is not
   viewBoxHeight?: number - must be defined if viewBoxSize is not
   size?: number
   overflowFixScaleRatio?: number
   overflowFixPosition?: number
   children: ReactNode

props in detail:

• viewBoxSize
  • you copy it from original svg element
  • never change this value!! - paths inside svg are calculations based on viewBox
  • when viewBoxWidth and viewBoxHeight are the same -> you don't have to define viewBoxWidth & viewBoxHeight then
• viewBoxWidth
  • you copy it from original svg element
  • never change this value!! - paths inside svg are calculations based on viewBox
  • don't define it if you defined viewBoxSize
• viewBoxHeight
  • you copy it from original svg element - never change this value!! - paths inside svg are calculations based on viewBox
  • don't define it if you defined viewBoxSize
• size
  • if not defined, it takes (viewBoxWidth && viewBoxHeight) || viewBoxSize as it's width and height parameters
  • if width and height are not the same, it defines the longer side length -> the other side is ratio calculated
• overflowFixScaleRatio
  • useful for charts => when you define a stroke, it can overflow the viewBox, making part of the svg invisible
• overflowFixPosition
  • useful for charts => when you use overflowFixScaleRatio, the paths inside viewBox might need a little adjustment nudge
• children
  • all other svg elements but <svg />