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.

• Basic example
• Next example

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