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 always true.
• containerMaxWidth parameter sets max container (ref={ra.container}) width when trigger is always true.

Usage example

Default example

import React, { Component } from 'react';
import ReactAdaptation from 'react-adaptation';
 
class DefaultExampleComponent extends Component {
    render() {
        const { ra } = this.props;
        return (
            <div ref={ra.container} className={ra.shouldAdaptate ? "container mobile" : "container"}>
                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
            </div>
        );
    }
}
 
export default ReactAdaptation(DefaultExampleComponent);

Required styles

.container > * {
    display: inline-block;
}

or you may use fixed width and float left:

import React, { Component } from 'react';
import ReactAdaptation from 'react-adaptation';
 
class FloatExampleComponent extends Component {
    render() {
        const { ra } = this.props;
        return (
            <div ref={ra.container} className={ra.shouldAdaptate ? "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>
        );
    }
}
 
export default ReactAdaptation(FloatExampleComponent);

Selected components example

import React, { Component } from 'react';
import ReactAdaptation from 'react-adaptation';
 
class CustomComponentsComponent extends Component {
    render() {
        const { ra } = this.props;
        return (
            <div ref={ra.container} className={ra.shouldAdaptate ? "container mobile" : "container"}>
                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                <div style={{display: 'inline-block'}} ref={ra.component}>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                <div style={{display: 'inline-block'}} ref={ra.component}>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
            </div>
        );
    }
}
 
export default ReactAdaptation(CustomComponentsComponent);

maxWidth example

import React, { Component } from 'react';
import ReactAdaptation from 'react-adaptation';
 
class MaxWidthExampleComponent extends Component {
    render() {
        const { ra } = this.props;
        return (
            <div ref={ra.container} className={ra.shouldAdaptate ? "container mobile" : "container"}>
                <div>Lorem ipsum dolor.</div>
                <div>Lorem ipsum dolor.</div>
            </div>
        );
    }
}
 
export default ReactAdaptation(MaxWidthExampleComponent, {maxWidth: 768});

containerMaxWidth example

import React, { Component } from 'react';
import ReactAdaptation from 'react-adaptation';
 
class ContainerMaxWidthExampleComponent extends Component {
    render() {
        const { ra } = this.props;
        return (
            <div ref={ra.container} className={ra.shouldAdaptate ? "container mobile" : "container"} style={{padding: 20}}>
                <div>Lorem ipsum dolor.</div>
                <div>Lorem ipsum dolor.</div>
            </div>
        );
    }
}
 
export default ReactAdaptation(ContainerMaxWidthExampleComponent, {containerMaxWidth: 768});