❤
npm
Sign UpSign In

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

0.1.0 • Public • Published

Lycoons React Grid

Lycoons Grid System for React.

Installation (for standard modern project)

yarn add @lycoons/react-grid

Or

npm install @lycoons/react-grid

Example usage

First add grid.min.css for styles.

For CRA add in index, for Next.js add in _app

import '@lycoons/css/lycoons-grid.min.css'

Using grid

import { Container, Row, Col } from '@lycoons/react-grid'

const SomeComponent = () => {
  return (
    <Container>
      <Row>
         <Col col='12'>
           <h1>Lycoons UI React Grid</h1>
         </Col>
      </Row>
    </Container>
  )
}

Props

Container

Prop Type Default Breakpoint
fluid boolean false all
sm boolean undefined sm
md boolean undefined md
lg boolean undefined lg
xl boolean undefined xl
xxl boolean undefined xxl

Row

Prop Type Default Breakpoint
rowCols boolean, "auto", "1", "2", "3", "4", "5", "6" false all
rowColsSm boolean, "auto", "1", "2", "3", "4", "5", "6" false sm
rowColsMd boolean, "auto", "1", "2", "3", "4", "5", "6" false md
rowColsLg boolean, "auto", "1", "2", "3", "4", "5", "6" false lg
rowColsXl boolean, "auto", "1", "2", "3", "4", "5", "6" false xl
rowColsXxl boolean, "auto", "1", "2", "3", "4", "5", "6" false xxl
justifyContent "start", "end", "center", "between", "around", "evenly" undefined all
justifyContentSm "start", "end", "center", "between", "around", "evenly" undefined sm
justifyContentMd "start", "end", "center", "between", "around", "evenly" undefined md
justifyContentLg "start", "end", "center", "between", "around", "evenly" undefined lg
justifyContentXl "start", "end", "center", "between", "around", "evenly" undefined xl
justifyContentXxl "start", "end", "center", "between", "around", "evenly" undefined xxl
alignItems "start", "end", "center", "baseline", "stretch" undefined all
alignItemsSm "start", "end", "center", "baseline", "stretch" undefined sm
alignItemsMd "start", "end", "center", "baseline", "stretch" undefined md
alignItemsLg "start", "end", "center", "baseline", "stretch" undefined lg
alignItemsXl "start", "end", "center", "baseline", "stretch" undefined xl
alignItemsXxl "start", "end", "center", "baseline", "stretch" undefined xxl
m "auto", "1", "2", "3", "4", "5", "0" undefined all
mSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
mMd "auto", "1", "2", "3", "4", "5", "0" undefined md
mLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
mXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
mXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
mx "auto", "1", "2", "3", "4", "5", "0" undefined all
mxSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
mxMd "auto", "1", "2", "3", "4", "5", "0" undefined md
mxLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
mxXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
mxXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
my "auto", "1", "2", "3", "4", "5", "0" undefined all
mySm "auto", "1", "2", "3", "4", "5", "0" undefined sm
myMd "auto", "1", "2", "3", "4", "5", "0" undefined md
myLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
myXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
myXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
mb "auto", "1", "2", "3", "4", "5", "0" undefined all
mbSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
mbMd "auto", "1", "2", "3", "4", "5", "0" undefined md
mbLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
mbXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
mbXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
mt "auto", "1", "2", "3", "4", "5", "0" undefined all
mtSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
mtMd "auto", "1", "2", "3", "4", "5", "0" undefined md
mtLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
mtXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
mtXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
ms "auto", "1", "2", "3", "4", "5", "0" undefined all
msSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
msMd "auto", "1", "2", "3", "4", "5", "0" undefined md
msLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
msXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
msXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
me "auto", "1", "2", "3", "4", "5", "0" undefined all
meSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
meMd "auto", "1", "2", "3", "4", "5", "0" undefined md
meLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
meXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
meXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
g "1", "2", "3", "4", "5", "0" undefined all
gSm "1", "2", "3", "4", "5", "0" undefined sm
gMd "1", "2", "3", "4", "5", "0" undefined md
gLg "1", "2", "3", "4", "5", "0" undefined lg
gXl "1", "2", "3", "4", "5", "0" undefined xl
gXxl "1", "2", "3", "4", "5", "0" undefined xxl
gx "1", "2", "3", "4", "5", "0" undefined all
gxSm "1", "2", "3", "4", "5", "0" undefined sm
gxMd "1", "2", "3", "4", "5", "0" undefined md
gxLg "1", "2", "3", "4", "5", "0" undefined lg
gxXl "1", "2", "3", "4", "5", "0" undefined xl
gxXxl "1", "2", "3", "4", "5", "0" undefined xxl
gy "1", "2", "3", "4", "5", "0" undefined all
gySm "1", "2", "3", "4", "5", "0" undefined sm
gyMd "1", "2", "3", "4", "5", "0" undefined md
gyLg "1", "2", "3", "4", "5", "0" undefined lg
gyXl "1", "2", "3", "4", "5", "0" undefined xl
gyXxl "1", "2", "3", "4", "5", "0" undefined xxl
p "auto", "1", "2", "3", "4", "5", "0" undefined all
pSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
pMd "auto", "1", "2", "3", "4", "5", "0" undefined md
pLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
pXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
pXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
px "auto", "1", "2", "3", "4", "5", "0" undefined all
pxSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
pxMd "auto", "1", "2", "3", "4", "5", "0" undefined md
pxLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
pxXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
pxXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
py "auto", "1", "2", "3", "4", "5", "0" undefined all
pySm "auto", "1", "2", "3", "4", "5", "0" undefined sm
pyMd "auto", "1", "2", "3", "4", "5", "0" undefined md
pyLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
pyXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
pyXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
pb "auto", "1", "2", "3", "4", "5", "0" undefined all
pbSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
pbMd "auto", "1", "2", "3", "4", "5", "0" undefined md
pbLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
pbXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
pbXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
pt "auto", "1", "2", "3", "4", "5", "0" undefined all
ptSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
ptMd "auto", "1", "2", "3", "4", "5", "0" undefined md
ptLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
ptXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
ptXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
ps "auto", "1", "2", "3", "4", "5", "0" undefined all
psSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
psMd "auto", "1", "2", "3", "4", "5", "0" undefined md
psLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
psXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
psXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
pe "auto", "1", "2", "3", "4", "5", "0" undefined all
peSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
peMd "auto", "1", "2", "3", "4", "5", "0" undefined md
peLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
peXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
peXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl

Col

Prop Type Default Breakpoint
col true , 'auto' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' , '12' all
colSm true , 'auto' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' , '12' all
colMd true , 'auto' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' , '12' all
colLg true , 'auto' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' , '12' all
colXl true , 'auto' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' , '12' all
colXll true , 'auto' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' , '12' all
hidden boolean undefined all
hiddenSm boolean undefined sm
hiddenMd boolean undefined md
hiddenLg boolean undefined lg
hiddenXl boolean undefined xl
hiddenXll boolean undefined xxl
visible boolean undefined all
visibleSm boolean undefined sm
visibleMd boolean undefined md
visibleLg boolean undefined lg
visibleXl boolean undefined xl
visibleXll boolean undefined xxl
order 'first' , '0' , '1' , '2' , '3' , '4' , '5' , 'last' undefined all
orderSm 'first' , '0' , '1' , '2' , '3' , '4' , '5' , 'last' undefined sm
orderMd 'first' , '0' , '1' , '2' , '3' , '4' , '5' , 'last' undefined md
orderLg 'first' , '0' , '1' , '2' , '3' , '4' , '5' , 'last' undefined lg
orderXl 'first' , '0' , '1' , '2' , '3' , '4' , '5' , 'last' undefined xl
orderXll 'first' , '0' , '1' , '2' , '3' , '4' , '5' , 'last' undefined xxl
offset '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' undefined all
offsetSm '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' undefined sm
offsetMd '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' undefined md
offsetLg '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' undefined lg
offsetXl '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' undefined xl
offsetXll '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' undefined xxl
m "auto", "1", "2", "3", "4", "5", "0" undefined all
mSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
mMd "auto", "1", "2", "3", "4", "5", "0" undefined md
mLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
mXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
mXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
mx "auto", "1", "2", "3", "4", "5", "0" undefined all
mxSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
mxMd "auto", "1", "2", "3", "4", "5", "0" undefined md
mxLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
mxXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
mxXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
my "auto", "1", "2", "3", "4", "5", "0" undefined all
mySm "auto", "1", "2", "3", "4", "5", "0" undefined sm
myMd "auto", "1", "2", "3", "4", "5", "0" undefined md
myLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
myXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
myXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
mb "auto", "1", "2", "3", "4", "5", "0" undefined all
mbSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
mbMd "auto", "1", "2", "3", "4", "5", "0" undefined md
mbLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
mbXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
mbXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
mt "auto", "1", "2", "3", "4", "5", "0" undefined all
mtSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
mtMd "auto", "1", "2", "3", "4", "5", "0" undefined md
mtLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
mtXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
mtXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
ms "auto", "1", "2", "3", "4", "5", "0" undefined all
msSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
msMd "auto", "1", "2", "3", "4", "5", "0" undefined md
msLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
msXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
msXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
me "auto", "1", "2", "3", "4", "5", "0" undefined all
meSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
meMd "auto", "1", "2", "3", "4", "5", "0" undefined md
meLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
meXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
meXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
p "auto", "1", "2", "3", "4", "5", "0" undefined all
pSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
pMd "auto", "1", "2", "3", "4", "5", "0" undefined md
pLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
pXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
pXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
px "auto", "1", "2", "3", "4", "5", "0" undefined all
pxSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
pxMd "auto", "1", "2", "3", "4", "5", "0" undefined md
pxLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
pxXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
pxXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
py "auto", "1", "2", "3", "4", "5", "0" undefined all
pySm "auto", "1", "2", "3", "4", "5", "0" undefined sm
pyMd "auto", "1", "2", "3", "4", "5", "0" undefined md
pyLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
pyXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
pyXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
pb "auto", "1", "2", "3", "4", "5", "0" undefined all
pbSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
pbMd "auto", "1", "2", "3", "4", "5", "0" undefined md
pbLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
pbXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
pbXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
pt "auto", "1", "2", "3", "4", "5", "0" undefined all
ptSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
ptMd "auto", "1", "2", "3", "4", "5", "0" undefined md
ptLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
ptXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
ptXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
ps "auto", "1", "2", "3", "4", "5", "0" undefined all
psSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
psMd "auto", "1", "2", "3", "4", "5", "0" undefined md
psLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
psXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
psXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl
pe "auto", "1", "2", "3", "4", "5", "0" undefined all
peSm "auto", "1", "2", "3", "4", "5", "0" undefined sm
peMd "auto", "1", "2", "3", "4", "5", "0" undefined md
peLg "auto", "1", "2", "3", "4", "5", "0" undefined lg
peXl "auto", "1", "2", "3", "4", "5", "0" undefined xl
peXxl "auto", "1", "2", "3", "4", "5", "0" undefined xxl

Readme

Keywords

none

Package Sidebar

Install

npm i @lycoons/react-grid

Weekly Downloads

0

Version

0.1.0

License

MIT

Unpacked Size

646 kB

Total Files

71

Last publish

Collaborators

  • nikosantis
Try on RunKit
Report malware