1.0.3 • Published 5 years ago
listner-resize-page v1.0.3
listner-resize-page
Repository: https://github.com/zerfo/listener-resize-page
Listen to your screen type and display the components you need for a particular screen type.
Installation
$ npm install listener-resize-page
or
$ yarn add listener-resize-page
Usage
Component
import { Resizer } from "listner-resize-page";
...
<Resizer>
<YourComponent />
</Resizer>
...
Same as:
import { Resizer } from "listner-resize-page";
...
const yourConfig = {
desktop: 990, // width >= 990px
tablet: 989, // width <= 989px && width > 769px
mobile: 769, // width <= 769px
};
...
<Resizer config={yourConfig}>
<YourComponent />
</Resizer>
React hook
import { useWindowType } from "listner-resize-page";
...
const typeWindow = useWindowType();
Same as:
import { useWindowType } from "listner-resize-page";
...
const yourConfig = {
desktop: 990, // width >= 990px
tablet: 989, // width <= 989px && width > 769px
mobile: 769, // width <= 769px
};
const typeWindow = useWindowType(yourConfig);
Contributing
- Fork
> git clone
> npm install
- Make your changes
> npm run test
> npm run lint
- If everything is passing: - Update CHANGELOG.md - Commit and Make a pull request
License
MIT © Nikolay Smekalin