nicholasmole / check-size-change

Check if the Window Size has change

Check Size Change

React Parent Wrapper Component that checks if the Screen Size has change

Usage

Simply install the application

npm i @nicholasmole/checkSizeChange

Then add the wrapper to your Component

export default checkSizeChange(Home);

Now the Home Component will have a two new booleans isMobileLimit & isTabletLimit

Editing Default Sizes

Both of the default size checks follow bootstrap sizes

isMobileLimit: 576 isTabletLimit: 992

If you want to edit this sizes you can by sending and object to checkSizeChange using the key words mobile and tablet

export default checkSizeChange(Home, {mobile: 500, tablet: 769});

Adding Custom Sizes

But what if you want to check against other sizes?

If you want to make something like isTooSmallForMenu with the size of 632

Do this:

const extraSizes = [
	{
		prop: 'isTooSmallForMenu',
		limit: 632
	}
];

export default checkSizeChange(Home, {extraSizes});

Now the Home Component will get a new boolean prop called isTooSmallForMenu!

extraSizes can be an infinitly long array of objects

prop: is the name of the passed prop limit: is the limit size of the prop