❤
npm
Sign UpSign In

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

Readme

Keywords

Package Sidebar

Install

npm i react-adaptation

Repository

github.com/aleksei0807/react-adaptation

Homepage

github.com/aleksei0807/react-adaptation#readme

Weekly Downloads

0

Version

0.1.1

License

MIT

Last publish

Collaborators

  • aleksei0807
Try on RunKit
Report malware