responsive-view-trigger

Responsive view change trigger class for Javascript

In certain cases you may want to have more control than just use the CSS @media queries. This class makes it possible to have a callback function fired in case of change in the view (resize or orientation change).
The callback function will be called ONLY if any of the two components of the output parameter object has changed.
For React consider using the @kekalma/responsive package.

Input (constructor) parameters:

parameter	values	Description
minWidth	pixels	The screen width, where the event fires.
minHeight	pixels	The screen height, where the event fires.
mobileViewHandler	function	A callback function for the event trigger.

The return object is:

type mobileStatusType = {
  mobileView    :  boolean | null,
  portraitView  :  boolean | null,
  width         :  pixels  | null,
  height        :  pixels  | null
}

components	values	Description
mobileView	true|false	Sends TRUE if the screen width is smaller than minWidth and/or the screen height is smaller than minHeight.
portraitView	true|false	TRUE = portrait, FALSE = landscape arrangement.

Use the class in VanillaJs:

import ResponsiveViewTrigger from 'responsive-view-trigger';

const minWidth = 1024;
new ResponsiveViewTrigger(minWidth, , mobileViewHandler);

function mobileViewHandler(mobileStatus){
  // add or remove CSS class names and do the other things...
}

the same code, VanillaJS with Typescript :

import ResponsiveViewTrigger, {mobileStatusType} from 'responsive-view-trigger';

const minWidth : number = 1024;
new ResponsiveViewTrigger(minWidth, , mobileViewHandler);

function mobileViewHandler(mobileStatus : mobileStatusType){
  // add or remove CSS class names and do the other things...
}

Class example using React :

import ResponsiveViewTrigger from 'responsive-view-trigger';

export default class myClassComponent extends Component{
  construct (props) {
    super(props);
    ...
    this.mobileViewHandler = this.mobileViewHandler.bind(this);
  }

  componentDidMount() {
    const minWidth = 1024;
    new ResponsiveViewTrigger(minWidth, , this.mobileViewHandler);
  }

  mobileViewHandler = (mobileView: boolean, portraitView: boolean)=> {
    // change states depending on the incoming parameters, etc.
  }

  render() {
    return (
      ...
    )
  }
};

the same code, React with Typescript :

import ResponsiveViewTrigger, {mobileStatusType} from 'responsive-view-trigger';

type myProps = { ... }
type myState = {
  ...
  mobileState: mobileStatusType
}

export default class myClassComponent extends Component<myProps,myState>{
  construct (props : myProps) {
    super(props);
    ...
    this.state = {
      ...
      mobileState: {mobileView: null, portraitView:null}
    }
    this.mobileViewHandler = this.mobileViewHandler.bind(this);
  }

  componentDidMount() {
    const minWidth : number = 1024;
    new ResponsiveViewTrigger(minWidth, , this.mobileViewHandler);
  }

  mobileViewHandler = ( newMobileState : mobileStatusType)=> {
    this.setState({
      mobileState : newMobileState
    })
    // change other states, styles etc. depending on the incoming status, etc.
  }

  render() {
    return (
      ...
    )
  }
};

Personal note:

Consider to use plain CSS @media queries, as it gives you more possibilities.

Changelog:

Version	What's new, description
2.0.1	minHeight property. Returning width and height of the screen.

Written by: Attila Kiss, e-LET Kft, Hungary ( GitHub: kissato70 )

Licence: MIT

Report issues here.

Future version enhancement plans:

• Screen turning triggering (fires an event at a certain angle)

Support the project >>> Donation

Please support the further releases, if you like this class! Thank you!