Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-adaptation

aleksei08073MIT0.1.1

Mixin that simplify adaptation of your react components

react, adaptation, mixin, component, components, responsive

readme

npm version

NPM

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});