Responsive-view-trigger NPM

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. |

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