React Adaptation
Mixin that simplify adaptation of your react components.
It perfoms checks in one of two ways:
- it checks that all first-level childs' widths together less or equals container's (
ref={ra.container}
) width. - it checks that all components with
ref={ra.component}
widths together less or equals container's width.
Also it can perform addictive checks like maxWidth
or containerMaxWidth
.
maxWidth
parameter sets max document width when trigger is alwaystrue
.containerMaxWidth
parameter sets max container (ref={ra.container}
) width when trigger is alwaystrue
.
Usage example
Default example
;; { const ra = thisprops; return <div ref=racontainer className=rashouldAdaptate ? "container mobile" : "container"> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit</div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit</div> </div> ; } DefaultExampleComponent;
Required styles
or you may use fixed width and float left:
;; { const ra = thisprops; return <div ref=racontainer className=rashouldAdaptate ? "container-float mobile" : "container-float"> <div style=float: 'left' width: 300>Lorem ipsum dolor sit amet consectetur adipisicing elit</div> <div style=float: 'left' width: 400>Lorem ipsum dolor sit amet consectetur adipisicing elit</div> </div> ; } FloatExampleComponent;
Selected components example
;; { const ra = thisprops; return <div ref=racontainer className=rashouldAdaptate ? "container mobile" : "container"> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit</div> <div style=display: 'inline-block' ref=racomponent>Lorem ipsum dolor sit amet consectetur adipisicing elit</div> <div style=display: 'inline-block' ref=racomponent>Lorem ipsum dolor sit amet consectetur adipisicing elit</div> </div> ; } CustomComponentsComponent;
maxWidth example
;; { const ra = thisprops; return <div ref=racontainer className=rashouldAdaptate ? "container mobile" : "container"> <div>Lorem ipsum dolor</div> <div>Lorem ipsum dolor</div> </div> ; } MaxWidthExampleComponent maxWidth: 768;
containerMaxWidth example
;; { const ra = thisprops; return <div ref=racontainer className=rashouldAdaptate ? "container mobile" : "container" style=padding: 20> <div>Lorem ipsum dolor</div> <div>Lorem ipsum dolor</div> </div> ; } ContainerMaxWidthExampleComponent containerMaxWidth: 768;