npm package: @iyio/react-common
Description: The `@iyio/react-common` library contains a set of unstyled components and hooks for common uses cases within the IYIO framework. All the components in the library use a layout system referred to as **BaseLayout**
Latest version: 0.8.18

# react-common
The `@iyio/react-common` library contains a set of unstyled components and hooks for common uses
cases within the IYIO framework. All the components in the library use a layout system referred to
as **BaseLayout** 


## Layout Props

Documentation for @iyio/react-common is a work in progress



``` ts
type BaseLayoutAnimationSpeed='fast'|'quick'|'slow'|'extraSlow';

interface BaseLayoutAnimationProps{

    /**
     * Transitions all css properties
     */
    transAll?:boolean|BaseLayoutAnimationSpeed;

    /**
     * Transitions the transform css property
     */
    transTransform?:boolean|BaseLayoutAnimationSpeed;

    /**
     * Transitions the opacity css property
     */
    transOpacity?:boolean|BaseLayoutAnimationSpeed;

    /**
     * Transitions the color css property
     */
    transColor?:boolean|BaseLayoutAnimationSpeed;

    /**
     * Transitions the background-color css property
     */
    transBackgroundColor?:boolean|BaseLayoutAnimationSpeed;

    /**
     * Transitions the transform css property
     */
    transCommon?:boolean|BaseLayoutAnimationSpeed;
}
```

export const baseLayoutColumnProps={
    colXs:'ioColXs',
    colSm:'ioColSm',
    colMd:'ioColMd',
    colLg:'ioColLg',
    colXl:'ioColXl',
    colMinXs:'ioColMinXs',
    colMinSm:'ioColMinSm',
    colMinMd:'ioColMinMd',
    colMinLg:'ioColMinLg',
    colMinXl:'ioColMinXl',
    colMaxXs:'ioColMaxXs',
    colMaxSm:'ioColMaxSm',
    colMaxMd:'ioColMaxMd',
    colMaxLg:'ioColMaxLg',
    colMaxXl:'ioColMaxXl',
} as const;
Object.freeze(baseLayoutColumnProps);
export type BaseLayoutColumnProps = {
    -readonly [prop in keyof typeof baseLayoutColumnProps]?:BaseLayoutFlagValue;
}

export const baseLayoutFontProps={
    faceDefault:'ioFaceDefault',
    face0:'ioFace0',
    face1:'ioFace1',
    face2:'ioFace2',
    face3:'ioFace3',
    face4:'ioFace4',
    face5:'ioFace5',
    face6:'ioFace6',
    face7:'ioFace7',
    face8:'ioFace8',
    face9:'ioFace9',
    face10:'ioFace10',
    face11:'ioFace11',
    face12:'ioFace12',
    face13:'ioFace13',
    face14:'ioFace14',
    face15:'ioFace15',
    face16:'ioFace16',
    face17:'ioFace17',
    face18:'ioFace18',
    face19:'ioFace19',
    face20:'ioFace20',
    xxxs:'ioXxxs',
    xxs:'ioXxs',
    xs:'ioXs',
    sm:'ioSm',
    md:'ioMd',
    lg:'ioLg',
    xl:'ioXl',
    xxl:'ioXxl',
    xxxl:'ioXxxl',
    weightBold:'ioWeightBold',
    weightThin:'ioWeightThin',
    centerText:'ioCenterText',
    leftText:'ioLeftText',
    rightText:'ioRightText',
    preSpace:'ioPreSpace',
    singleLine:'ioSingleLine',
    lineHeight100:'ioLineHeight100',
    lineHeight125:'ioLineHeight125',
    lineHeight150:'ioLineHeight150',
    lineHeight175:'ioLineHeight175',
    lineHeight200:'ioLineHeight200',
    textShadowSm:'ioTextShadowSm',
    textShadowMd:'ioTextShadowMd',
    textShadowLg:'ioTextShadowLg',
    body:'ioBody',//mapped - faceDefault
    h1:'ioH1',//mapped - face1
    h2:'ioH2',//mapped - face2
    h3:'ioH3',//mapped - face3
    h4:'ioH4',//mapped - face4
    h5:'ioH5',//mapped - face5
    h6:'ioH6',//mapped - face6
} as const;
Object.freeze(baseLayoutFontProps);
export type BaseLayoutFontProps = {
    -readonly [prop in keyof typeof baseLayoutFontProps]?:BaseLayoutFlagValue;
}

export const baseLayoutColorBaseProps={
    color1:'ioColor1',
    color2:'ioColor2',
    color3:'ioColor3',
    color4:'ioColor4',
    color5:'ioColor5',
    color6:'ioColor6',
    color7:'ioColor7',
    color8:'ioColor8',
    color9:'ioColor9',
    color10:'ioColor10',
    color11:'ioColor11',
    color12:'ioColor12',
    color13:'ioColor13',
    color14:'ioColor14',
    color15:'ioColor15',
    color16:'ioColor16',
} as const;
Object.freeze(baseLayoutColorBaseProps);

export const baseLayoutColorMappedProps={
    colorPrimary:'ioColorPrimary',//mapped color1
    colorSecondary:'ioColorSecondary',//mapped color2
    colorInfo:'ioColorInfo',// mapped - color6
    colorSuccess:'ioColorSuccess',// mapped - color7
    colorWarn:'ioColorWarn',// mapped - color8
    colorDanger:'ioColorDanger',// mapped - color9
    colorForeground:'ioColorForeground',// mapped - color10
    colorBg:'ioColorBg',// mapped - color11
    colorBorder:'ioColorBorder',// mapped - color12
    colorMuted:'ioColorMuted',// mapped - color13
    colorContainer:'ioColorContainer',// mapped - color14
    colorInput:'ioColorInput',// mapped - color15
} as const;
Object.freeze(baseLayoutColorMappedProps);

export const baseLayoutColorProps={
    ...baseLayoutColorBaseProps,
    ...baseLayoutColorMappedProps,

} as const;
Object.freeze(baseLayoutColorProps);
export type BaseLayoutColorProps = {
    -readonly [prop in keyof typeof baseLayoutColorProps]?:BaseLayoutFlagValue;
}

export const baseLayoutGapProps={
    g0:'ioG0',
    g025:'ioG025',
    g050:'ioG050',
    g075:'ioG075',
    g1:'ioG1',
    g2:'ioG2',
    g3:'ioG3',
    g4:'ioG4',
    g5:'ioG5',
    g6:'ioG6',
    g7:'ioG7',
    g8:'ioG8',
    g9:'ioG9',
    g10:'ioG10',
} as const;
Object.freeze(baseLayoutGapProps);
export type BaseLayoutGapProps = {
    -readonly [prop in keyof typeof baseLayoutGapProps]?:BaseLayoutFlagValue;
}

export const baseLayoutPaddingProps={
    p025:'ioP025',
    p050:'ioP050',
    p075:'ioP075',
    p0:'ioP0',
    p1:'ioP1',
    p2:'ioP2',
    p3:'ioP3',
    p4:'ioP4',
    p5:'ioP5',
    p6:'ioP6',
    p7:'ioP7',
    p8:'ioP8',
    p9:'ioP9',
    p10:'ioP10',
    pl0:'ioPl0',
    pl025:'ioPl025',
    pl050:'ioPl050',
    pl075:'ioPl075',
    pl1:'ioPl1',
    pl2:'ioPl2',
    pl3:'ioPl3',
    pl4:'ioPl4',
    pl5:'ioPl5',
    pl6:'ioPl6',
    pl7:'ioPl7',
    pl8:'ioPl8',
    pl9:'ioPl9',
    pl10:'ioPl10',
    pr0:'ioPr0',
    pr025:'ioPr025',
    pr050:'ioPr050',
    pr075:'ioPr075',
    pr1:'ioPr1',
    pr2:'ioPr2',
    pr3:'ioPr3',
    pr4:'ioPr4',
    pr5:'ioPr5',
    pr6:'ioPr6',
    pr7:'ioPr7',
    pr8:'ioPr8',
    pr9:'ioPr9',
    pr10:'ioPr10',
    pt0:'ioPt0',
    pt025:'ioPt025',
    pt050:'ioPt050',
    pt075:'ioPt075',
    pt1:'ioPt1',
    pt2:'ioPt2',
    pt3:'ioPt3',
    pt4:'ioPt4',
    pt5:'ioPt5',
    pt6:'ioPt6',
    pt7:'ioPt7',
    pt8:'ioPt8',
    pt9:'ioPt9',
    pt10:'ioPt10',
    pb0:'ioPb0',
    pb025:'ioPb025',
    pb050:'ioPb050',
    pb075:'ioPb075',
    pb1:'ioPb1',
    pb2:'ioPb2',
    pb3:'ioPb3',
    pb4:'ioPb4',
    pb5:'ioPb5',
    pb6:'ioPb6',
    pb7:'ioPb7',
    pb8:'ioPb8',
    pb9:'ioPb9',
    pb10:'ioPb10',
    ph0:'ioPh0',
    ph025:'ioPh025',
    ph050:'ioPh050',
    ph075:'ioPh075',
    ph1:'ioPh1',
    ph2:'ioPh2',
    ph3:'ioPh3',
    ph4:'ioPh4',
    ph5:'ioPh5',
    ph6:'ioPh6',
    ph7:'ioPh7',
    ph8:'ioPh8',
    ph9:'ioPh9',
    ph10:'ioPh10',
    pv0:'ioPv0',
    pv025:'ioPv025',
    pv050:'ioPv050',
    pv075:'ioPv075',
    pv1:'ioPv1',
    pv2:'ioPv2',
    pv3:'ioPv3',
    pv4:'ioPv4',
    pv5:'ioPv5',
    pv6:'ioPv6',
    pv7:'ioPv7',
    pv8:'ioPv8',
    pv9:'ioPv9',
    pv10:'ioPv10',
    // Container margin
    pCon:'ioPCon',
} as const;
Object.freeze(baseLayoutPaddingProps);
export type BaseLayoutPaddingProps = {
    -readonly [prop in keyof typeof baseLayoutPaddingProps]?:BaseLayoutFlagValue;
}

export const baseLayoutMarginProps={
    m0:'ioM0',
    m025:'ioM025',
    m050:'ioM050',
    m075:'ioM075',
    m1:'ioM1',
    m2:'ioM2',
    m3:'ioM3',
    m4:'ioM4',
    m5:'ioM5',
    m6:'ioM6',
    m7:'ioM7',
    m8:'ioM8',
    m9:'ioM9',
    m10:'ioM10',
    ml0:'ioMl0',
    ml025:'ioMl025',
    ml050:'ioMl050',
    ml075:'ioMl075',
    ml1:'ioMl1',
    ml2:'ioMl2',
    ml3:'ioMl3',
    ml4:'ioMl4',
    ml5:'ioMl5',
    ml6:'ioMl6',
    ml7:'ioMl7',
    ml8:'ioMl8',
    ml9:'ioMl9',
    ml10:'ioMl10',
    mr0:'ioMr0',
    mr025:'ioMr025',
    mr050:'ioMr050',
    mr075:'ioMr075',
    mr1:'ioMr1',
    mr2:'ioMr2',
    mr3:'ioMr3',
    mr4:'ioMr4',
    mr5:'ioMr5',
    mr6:'ioMr6',
    mr7:'ioMr7',
    mr8:'ioMr8',
    mr9:'ioMr9',
    mr10:'ioMr10',
    mt0:'ioMt0',
    mt025:'ioMt025',
    mt050:'ioMt050',
    mt075:'ioMt075',
    mt1:'ioMt1',
    mt2:'ioMt2',
    mt3:'ioMt3',
    mt4:'ioMt4',
    mt5:'ioMt5',
    mt6:'ioMt6',
    mt7:'ioMt7',
    mt8:'ioMt8',
    mt9:'ioMt9',
    mt10:'ioMt10',
    mb0:'ioMb0',
    mb025:'ioMb025',
    mb050:'ioMb050',
    mb075:'ioMb075',
    mb1:'ioMb1',
    mb2:'ioMb2',
    mb3:'ioMb3',
    mb4:'ioMb4',
    mb5:'ioMb5',
    mb6:'ioMb6',
    mb7:'ioMb7',
    mb8:'ioMb8',
    mb9:'ioMb9',
    mb10:'ioMb10',
    mh0:'ioMh0',
    mh025:'ioMh025',
    mh050:'ioMh050',
    mh075:'ioMh075',
    mh1:'ioMh1',
    mh2:'ioMh2',
    mh3:'ioMh3',
    mh4:'ioMh4',
    mh5:'ioMh5',
    mh6:'ioMh6',
    mh7:'ioMh7',
    mh8:'ioMh8',
    mh9:'ioMh9',
    mh10:'ioMh10',
    mv0:'ioMv0',
    mv025:'ioMv025',
    mv050:'ioMv050',
    mv075:'ioMv075',
    mv1:'ioMv1',
    mv2:'ioMv2',
    mv3:'ioMv3',
    mv4:'ioMv4',
    mv5:'ioMv5',
    mv6:'ioMv6',
    mv7:'ioMv7',
    mv8:'ioMv8',
    mv9:'ioMv9',
    mv10:'ioMv10',
    // Container margin
    mCon:'ioMCon',
} as const;
Object.freeze(baseLayoutMarginProps);
export type BaseLayoutMarginProps = {
    -readonly [prop in keyof typeof baseLayoutMarginProps]?:BaseLayoutFlagValue;
}

export const baseLayoutInnerFlexProps={
    displayFlex:'ioDisplayFlex',
    flexWrap:'ioFlexWrap',
    centerBoth:'ioCenterBoth',
    row:'ioRow',
    col:'ioCol',
    rowReverse:'ioRowReverse',
    colReverse:'ioColReverse',
    justifyCenter:'ioJustifyCenter',
    justifyStart:'ioJustifyStart',
    justifyEnd:'ioJustifyEnd',
    justifyAround:'ioJustifyAround',
    justifyBetween:'ioJustifyBetween',
    alignCenter:'ioAlignCenter',
    alignStart:'ioAlignStart',
    alignEnd:'ioAlignEnd',
    alignStretch:'ioAlignStretch',
} as const;
Object.freeze(baseLayoutInnerFlexProps);
export type BaseLayoutInnerFlexProps = {
    -readonly [prop in keyof typeof baseLayoutInnerFlexProps]?:BaseLayoutFlagValue;
}

export const baseLayoutFlexProps={
    flex1:'ioFlex1',
    flex2:'ioFlex2',
    flex3:'ioFlex3',
    flex4:'ioFlex4',
    flex5:'ioFlex5',
    flex6:'ioFlex6',
    flex7:'ioFlex7',
    flex8:'ioFlex8',
    flex9:'ioFlex9',
    flex10:'ioFlex10',
} as const;
Object.freeze(baseLayoutFlexProps);
export type BaseLayoutFlexProps = {
    -readonly [prop in keyof typeof baseLayoutFlexProps]?:BaseLayoutFlagValue;
}

export const baseLayoutSelfFlexProps={
    selfAlignCenter:'ioSelfAlignCenter',
    selfAlignStart:'ioSelfAlignStart',
    selfAlignEnd:'ioSelfAlignEnd',
    selfAlignStretch:'ioSelfAlignStretch',
} as const;
Object.freeze(baseLayoutSelfFlexProps);
export type BaseLayoutSelfFlexProps = {
    -readonly [prop in keyof typeof baseLayoutSelfFlexProps]?:BaseLayoutFlagValue;
}

export const baseLayoutInnerGridProps={
    displayGrid:'ioDisplayGrid',
    displayInlineGrid:'ioDisplayInlineGrid',
    grid1:'ioGrid1',
    grid2:'ioGrid2',
    grid3:'ioGrid3',
    grid4:'ioGrid4',
    grid5:'ioGrid5',
    grid6:'ioGrid6',
    grid7:'ioGrid7',
    grid8:'ioGrid8',
    grid9:'ioGrid9',
    grid10:'ioGrid10',
    gridAuto1:'ioGridAuto1',
    gridAuto2:'ioGridAuto2',
    gridAuto3:'ioGridAuto3',
    gridAuto4:'ioGridAuto4',
    gridAuto5:'ioGridAuto5',
    gridAuto6:'ioGridAuto6',
    gridAuto7:'ioGridAuto7',
    gridAuto8:'ioGridAuto8',
    gridAuto9:'ioGridAuto9',
    gridAuto10:'ioGridAuto10',
    gridLeftAuto2:'ioGridLeftAuto2',
    gridLeftAuto3:'ioGridLeftAuto3',
    gridLeftAuto4:'ioGridLeftAuto4',

} as const;
Object.freeze(baseLayoutInnerGridProps);
export type BaseLayoutInnerGridProps = {
    -readonly [prop in keyof typeof baseLayoutInnerGridProps]?:BaseLayoutFlagValue;
}

export const baseLayoutParentLayoutProps={
    stackingRow:'ioStackingRow',
    flexGrid:'ioFlexGrid',
}
Object.freeze(baseLayoutParentLayoutProps);
export type BaseLayoutParentLayoutProps = {
    -readonly [prop in keyof typeof baseLayoutParentLayoutProps]?:BaseLayoutFlagValue;
}

export const baseLayoutBreakpointProps={
    bpMobileSmUp:'ioBpMobileSmUp',
    bpMobileUp:'ioBpMobileUp',
    bpTabletSmUp:'ioBpTabletSmUp',
    bpTabletUp:'ioBpTabletUp',
    bpDesktopSmUp:'ioBpDesktopSmUp',
    bpDesktopUp:'ioBpDesktopUp',
    bpMobileSmDown:'ioBpMobileSmDown',
    bpMobileDown:'ioBpMobileDown',
    bpTabletSmDown:'ioBpTabletSmDown',
    bpTabletDown:'ioBpTabletDown',
    bpDesktopSmDown:'ioBpDesktopSmDown',
    bpDesktopDown:'ioBpDesktopDown',

} as const;
Object.freeze(baseLayoutBreakpointProps);
export type BaseLayoutBreakpointProps = {
    -readonly [prop in keyof typeof baseLayoutBreakpointProps]?:boolean;
}

export const baseLayoutUtilProps={
    offScreen:'ioOffScreen',
    posAbs:'ioPosAbs',
    absTop:'ioAbsTop',
    absBottom:'ioAbsBottom',
    absLeft:'ioAbsLeft',
    absRight:'ioAbsRight',
    absTopLeft:'ioAbsTopLeft',
    absTopRight:'ioAbsTopRight',
    absBottomLeft:'ioAbsBottomLeft',
    absBottomRight:'ioAbsBottomRight',
    absCenter:'ioAbsCenter',
    absRightCenter:'ioAbsRightCenter',
    absLeftCenter:'ioAbsLeftCenter',
    absTopCenter:'ioAbsTopCenter',
    absBottomCenter:'ioAbsBottomCenter',
    posRel:'ioPosRel',
    posFixed:'ioPosFixed',
    absFill:'ioAbsFill',
    absFillWh:'ioAbsFillWh',
    wh100:'ioWh100',
    w100:'ioW100',
    h100:'ioH100',
    borderBox:'ioBorderBox',
    pointerEventsNone:'ioPointerEventsNone',
    cursorPointer:'ioCursorPointer',
    displayNone:'ioDisplayNone',
    displayAuto:'ioDisplayAuto',
    listStyleNone:'ioListStyleNone',
    overflowHidden:'ioOverflowHidden',
    zIndex0:'ioZIndex0',
    zIndex1:'ioZIndex1',
    zIndex2:'ioZIndex2',
    zIndex3:'ioZIndex3',
    zIndex4:'ioZIndex4',
    zIndex5:'ioZIndex5',
    zIndex6:'ioZIndex6',
    zIndex7:'ioZIndex7',
    zIndex8:'ioZIndex8',
    zIndex9:'ioZIndex9',
    zIndex10:'ioZIndex10',
    zIndexMax:'ioZIndexMax',
    zIndexNeg1:'ioZIndexNeg1',
    zIndexNeg2:'ioZIndexNeg2',
    zIndexNeg3:'ioZIndexNeg3',
    zIndexNeg4:'ioZIndexNeg4',
    zIndexNeg5:'ioZIndexNeg5',
    zIndexNeg6:'ioZIndexNeg6',
    zIndexNeg7:'ioZIndexNeg7',
    zIndexNeg8:'ioZIndexNeg8',
    zIndexNeg9:'ioZIndexNeg9',
    zIndexNeg10:'ioZIndexNeg10',
    zIndexMin:'ioZIndexMin',
    zIsolate:'ioZIsolate',
    opacity0:'ioOpacity0',
    opacity025:'ioOpacity025',
    opacity050:'ioOpacity050',
    opacity075:'ioOpacity075',
    opacity1:'ioOpacity1',
    semiTransparent:'ioSemiTransparent',
    unsetAll:'ioUnsetAll',

} as const;