- Notifications
You must be signed in to change notification settings - Fork0
osamu38/react-layout-manager
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Layout manager not to give margins to components
To install, you can usenpm oryarn:
$ npm install -S react-layout-manager$ yarn add react-layout-managerExample:
importRLMfrom'react-layout-manager';functionEmail(){constEmailStyle={width:[100,'100%'],horizontalSpace:5,responsive:[{breakpoint:480,settings:{wrap:true,wrapVerticalSpace:5,},},],};constEmailInnerStyle={width:['65%',16,'35%'],horizontalSpace:5,};return(<RLM{...EmailStyle}><Label>Email</Label><RLM{...EmailInnerStyle}><Inputplaceholder="react-layout-manager"/><Unit>@</Unit><Inputplaceholder="gmail.com"/></RLM></RLM>);}
| Props | Type | Default Value | Description |
|---|---|---|---|
horizontalSpace | string | number | Array<string | number> | 0 | Horizontal space of element and element |
verticalSpace | string | number | Array<string | number> | 0 | Vertical space of element and element |
wrapVerticalSpace | string | number | Array<string | number> | 0 | Vertical space of element and element when wrap |
width | string | number | Array<string | number> | null | Width of elements |
innerWidth | string | number | Array<string | number> | null | Width in element |
verticalAlign | string | number | Array<string | number> | null | Vertical align |
align | 'left' | 'center' | 'right' | Array<'left' | 'center' | 'right'> | null | Align inner element |
visible | boolean | Array<boolean> | true | Whether the elements are displayed or not |
wrap | boolean | false | Whether to wrap or not |
Array of objects in the form of{ breakpoint: int, settings: { ... } } The breakpointnumber is themaxWidth so the settings will be applied when resolution is below this value.Example:[ { breakpoint: 1024, settings: { wrap: true, width: ['20%', 100, '80%'] } }, { breakpoint: 768, settings: { visible: false } }]
Demo Source:
importReact,{Component}from'react';importstyledfrom'styled-components';importRLMfrom'react-layout-manager';constInput=styled.input` ...`;constUnit=styled.div` ...`;constLabel=styled.div` ...`;functionEmail(){constEmailStyle={width:[100,'100%'],horizontalSpace:5,responsive:[{breakpoint:480,settings:{wrap:true,wrapVerticalSpace:5,},},],};constEmailInnerStyle={width:['65%',16,'35%'],horizontalSpace:5,};return(<RLM{...EmailStyle}><Label>Email</Label><RLM{...EmailInnerStyle}><Inputplaceholder="react-layout-manager"/><Unit>@</Unit><Inputplaceholder="gmail.com"/></RLM></RLM>);}functionTel(){constTelStyle={width:[100,160],horizontalSpace:5,responsive:[{breakpoint:480,settings:{width:'100%',wrap:true,wrapVerticalSpace:5,},},],};return(<RLM{...TelStyle}><Label>Tel</Label><Inputplaceholder="090XXXXXXXX"/></RLM>);}functionPassword(){constPasswordStyle={width:[100,240],horizontalSpace:5,responsive:[{breakpoint:480,settings:{width:'100%',wrap:true,wrapVerticalSpace:5,},},],};return(<RLM{...PasswordStyle}><Label>Password</Label><Inputplaceholder="rEaCtLaYoUtMaNaGeR"/></RLM>);}functionBirthday(){constBirthdayStyle={width:[100,'100%'],horizontalSpace:5,responsive:[{breakpoint:480,settings:{wrap:true,wrapVerticalSpace:5,},},],};constBirthdayInnerStyle={width:[56,16,44,16,44],horizontalSpace:5,responsive:[{breakpoint:480,settings:{width:['40%',16,'30%',16,'30%'],},},],};return(<RLM{...BirthdayStyle}><Label>Birthday</Label><RLM{...BirthdayInnerStyle}><Inputplaceholder="YYYY"/><Unit>ー</Unit><Inputplaceholder="MM"/><Unit>ー</Unit><Inputplaceholder="DD"/></RLM></RLM>);}functionPostalCode(){constPostalCodeStyle={width:[100,'100%'],horizontalSpace:5,responsive:[{breakpoint:480,settings:{wrap:true,wrapVerticalSpace:5,},},],};constPostalCodeInnerStyle={width:[64,16,80],horizontalSpace:5,responsive:[{breakpoint:480,settings:{width:['50%',16,'50%']},},],};return(<RLM{...PostalCodeStyle}><Label>PostalCode</Label><RLM{...PostalCodeInnerStyle}><Inputplaceholder="XXX"/><Unit>ー</Unit><Inputplaceholder="XXXX"/></RLM></RLM>);}functionCardNumber(){constCardNumberStyle={width:[100,'100%'],horizontalSpace:5,responsive:[{breakpoint:480,settings:{wrap:true,wrapVerticalSpace:5,},},],};constCardNumberInnerStyle={width:['50%',16,'50%'],horizontalSpace:5,wrapVerticalSpace:10,responsive:[{breakpoint:480,settings:{width:['100%',null,'100%'],wrap:true,visible:[true,false,true],},},],};constCardNumberCellStyle={width:['50%',16,'50%'],horizontalSpace:5,};return(<RLM{...CardNumberStyle}><Label>CardNumber</Label><RLM{...CardNumberInnerStyle}><RLM{...CardNumberCellStyle}><Inputplaceholder="XXXX"/><Unit>ー</Unit><Inputplaceholder="XXXX"/></RLM><Unit>ー</Unit><RLM{...CardNumberCellStyle}><Inputplaceholder="XXXX"/><Unit>ー</Unit><Inputplaceholder="XXXX"/></RLM></RLM></RLM>);}functionMain(){constMainStyle={width:'100%',verticalSpace:10,innerWidth:500,align:'center',};return(<RLM{...MainStyle}><Email/><Tel/><Password/><Birthday/><PostalCode/><CardNumber/></RLM>);}classAppextendsComponent{render(){return(<Main/>);}}exportdefaultApp;