Wondering what’s next for npm?Check out our public roadmap! »

    react-adaptation

    0.1.1 • Public • Published

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

    Install

    npm i react-adaptation

    DownloadsWeekly Downloads

    0

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • avatar