responsive-component v0.3.3

What about ?

This is a simple class extension,'ResponsiveComponent', that extends your 'Component' from React. This was created for fellas who still love react's in styles or just fellas that need information about the width and height of the window.

Side Note: css pseudo classes are not supported, take a look at Radium if you need pseudo class support

How does it work ?

It works with maxWidth and maxHeight from the top-down approach. min-width and min-height action queries are not supported. The programmer sets the breakpoints(pixel represented) and then handles the style changes in the breakpoint callback.

How to install ?

npm install responsive-component@0.3.3

How to use with your component ? Basic Example:

import React, { Component } from 'react'
import ResponsiveComponent from 'responsive-component'

const styles = {
    inputSearchStyle: {
        width: 'calc(100% - 80px)',
        border: 'none',
        outline: 'none',
        zIndex: '0',
        position: 'relative',
        top: '21px',
        paddingRight: '80px',
        height: '24px'
    },
    divSearchStyle: {
        display: 'inline-block',
        width: '25%',
        position: 'relative',
        marginLeft: '30%'      
    },
    labelSearchStyle: {
        fontStyle: 'italic',
        fontWeight: '543',
        display: 'inline-block',
        position: 'absolute',
        top: '23px',
        right: 'calc(26px + 0.65%)',
        cursor: 'pointer',
        color: '#757575'
    },
    imgSearchIconStyle: {
        position: 'absolute',
        right: '0.65%',
        top: '25px',
        cursor: 'pointer'       
    }
}

class TopNavSearch extends ResponsiveComponent{
    constructor(props){
        super(props)
        this.state = {
            ...styles,
            placeholder: ''
        }
    }

    response(){
        return {
            default: () => { return {divSearchStyle: {marginLeft: '30%', width: '25%', float: 'none'},
                                    labelSearchStyle: {display: 'inline-block'},
                                    inputSearchStyle: {paddingRight: '80px', width: 'calc(100% - 80px)'}
                            }},
            maxWidth: {
                1880: () => { return {divSearchStyle: {marginLeft: '20%'}}},
                1443: () => { return {divSearchStyle: {marginLeft: '10%'}}},
                1156: () => { return {divSearchStyle: {marginLeft: '2%'}}},
                998: () => { return {divSearchStyle: {marginLeft: '15px', float: 'left'}}},
                916: () => { return {labelSearchStyle: {display: 'none'},
                                    inputSearchStyle: {paddingRight: '20px', width: 'calc(100% - 20px)'}
                            }},  
                401: () => { return {divSearchStyle: { width: '50%' }}}
            },
            maxHeight: {
                1000: () => { alert('hit the 1000px mark) },
            },
            newState: (newState, lowestWidthBreakpoint, lowestHeightBreakpoint) => { 
                if(lowestWidthBreakpoint <= 916)
                    newState.placeholder = 'Search'
                else
                    newState.placeholder = ''
                this.setState(newState)
            },
            test: false
        }
    }

    componentWillMount(){
        super.componentWillMount()
    }

    ... your other code 

    render(){
        return  <div id='topnav-search-container' style={this.state.divSearchStyle}>
                    <input id='topnav-search-input' placeholder={this.state.placeholder} placeholderStyle={this.inputSearchPlaceholderStyle} style={this.state.inputSearchStyle}/>
                    <label id='topnav-search-label' style={this.state.labelSearchStyle}>Search</label>
                    <img id='topnav-search-icon' src='search.fw.png' style={this.state.imgSearchIconStyle}/>
                </div>
    }
} 

If your component plans on using componentWillMount make sure to call super.componentWillMount()

store styles in state

The component needs to store its styles in its state. There are many different ways to do that in this example:

class TopNavSearch extends ResponsiveComponent{
    constructor(props){
        super(props)
        this.state = {
            ...styles,
            placeholder: ''
        }
    }
}

the response() method is crucial for this to work:

It returns an object with 5 properties that are looked at. The two that are necessary, or the component will break, are default() and newState()

default()

default returns an object representing the values of the properties before you change em. This is needed to secure the backtrack.Side Note: this was a desicion based on not creating a full copy of the original styles rather let the programmer explicility let us know the standard values of the elements before being changed

default: () => { return {divSearchStyle: {marginLeft: '30%', width: '25%', float: 'none'},
                            labelSearchStyle: {display: 'inline-block'},
                            inputSearchStyle: {paddingRight: '80px', width: 'calc(100% - 80px)'}
                }},

newState()

    newState - is the new styles with its changes
    lowestWBreakpoint - is the lowest width breakpoint hit from the top down approach. That information could be used to change other 
        states besides the styles if you wish. Then this.setState(newState) to rerender the component with its
        new changes.
    lowestHBreakpoint - is the lowest height breakpoint. see lowestWBreakpoint above for more info.

newState: (newState, lowestWBreakpoint, lowestHBreakpoint) => { 
    if(lowestWBreakpoint <= 916)
        newState.placeholder = 'Search'
    else
        newState.placeholder = ''
    this.setState(newState) 
}

ResponsiveComponent reads the styles in state changes em and then call the newState callback to setState. The choice was to use setStates' shallow change of properties.

The other 2 properties of the object that are looked but not needed is maxWidth and maxHeight

ResponsiveComponent will use the top-down approach and hit the breakpoints you set in your maxWidth or maxHeight to make changes to the styles as you go. The breakpoint numbers are represented as pixels. The breakpoint callback either returns an object with its changes or it can not return an object and do other things.

    916: () => { return {labelSearchStyle: {display: 'none'},
                            inputSearchStyle: {paddingRight: '20px', width: 'calc(100% - 20px)'}
    }},  

    maxHeight: {
        1000: () => { alert('hit the 1000px mark) },
    },

The last property looked at is test

If flagged true it will put style changes and window resize properties in the console.

Render component using inline styles and components state:

    render(){
        return  <div id='topnav-search-container' style={this.state.divSearchStyle}>
                    <input id='topnav-search-input' placeholder={this.state.placeholder} placeholderStyle={this.inputSearchPlaceholderStyle} style={this.state.inputSearchStyle}/>
                    <label id='topnav-search-label' style={this.state.labelSearchStyle}>Search</label>
                    <img id='topnav-search-icon' src='search.fw.png' style={this.state.imgSearchIconStyle}/>
                </div>
    }

MIT License

Copyright 2018 Yevgeniy Skroznikov

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.