kyleamathews / react-component-width-mixin Goto Github PK

View Code? Open in Web Editor NEW

29.0 3.0 7.0 290 KB

React mixin which sets width as state variable and updates as component changes shape

Home Page: http://kyleamathews.github.io/element-resize-event/

License: MIT License

Makefile 19.22% JavaScript 80.78%

react-component-width-mixin's People

Stargazers

Watchers

Forkers

hull sverrejoh damianhodgkiss nihey patrykkopycinski isuvorov samhasler

react-component-width-mixin's Issues

Scroll and handle go inside textbox

This bug appears in chrome (icognito, on a retina macbook pro and on an attached thunderbolt display). Just grabbed the handle and moved it around, this happens pretty quick. I'm not using this component at the moment, so I don't think I'll have time to look at the code, just figured I'd add a bug report regardless.

Child with same mixin

If you have parent and child with your mixin and you showing/hiding block inside child you don't have fallback to mobile or table if child's block mounted

parent

mixins: [componentWidthMixin],
render: function () {
        console.info('PARENT: ' + this.state.componentWidth);
        if(this.state.componentWidth > 600){
            return (<Desktop/>);
        }
        if(this.state.componentWidth > 400){
            return (<Tablet/>);
        }
        return (<Mobile />);
    }

and child

mixins: [componentWidthMixin],
render: function () {
        console.info('CHILD: '+ this.state.componentWidth);
        if(this.state.componentWidth > 1050){
            return <div>EXTRA Desktop</div>;
        }
        return <div>Desktop</div>;
    }

Recommend Projects