# you-responsivecomponent

> A base class extending React Component, which has a listener on window resize event.

Latest version **1.0.1** (published 2020-09-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install you-responsivecomponent
pnpm add you-responsivecomponent
yarn add you-responsivecomponent
bun add you-responsivecomponent
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-09-08 |
| First published | 2020-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Kanata You |
| Maintainers | kanatayou |

## Links

- npm: https://www.npmjs.com/package/you-responsivecomponent
- Repository: https://github.com/AntoineYANG/You-ResponsiveComponent
- Homepage: https://github.com/AntoineYANG/You-ResponsiveComponent#readme
- Issues: https://github.com/AntoineYANG/You-ResponsiveComponent/issues
- npm.io page: https://npm.io/package/you-responsivecomponent

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1

## Recent versions

- 1.0.1 (latest) — 2020-09-08
- 1.0.0 — 2020-09-08

## README

# You-ResponsiveComponent

![](https://img.shields.io/badge/npm-v1.0.1-brightgreen)

A base class extending React Component, which has a listener on window resize event. 



## Install

```powershell
npm install you-responsivecomponent
```



## API Reference

### class ResponsiveComponent

>  *[src/ResonsiveComponent.tsx](https://github.com/AntoineYANG/You-ResponsiveComponent/blob/master/src/ResonsiveComponent.tsx)*

A `ResponsiveComponent` object is a `React.Component` object which is responsive to **resize event**. You can override the object method `componentWillResize` to handle resize event, and decide if it's necessary to automatically trigger a `forceUpdate` call. 



```tsx
class MyResponsiveCompo extends ResponsiveComponent<{ id: number; }, {}> {};
```

```tsx
<MyResponsiveCompo id={ 0 } />
```



#### Additional Lifecycle Methods

* **componentWillResize**

  Automatically called after the window resizes.

  If it returns `true`, `forceUpdate` will be called to update the elements. This will **NOT** cause a `setState` or a `getSnapshotBeforeUpdate` call. 

  **Parameters**

  * **WIDTH** {number}

    Current width of the window, px.

  * **HEIGHT** {number}

    Current height of the window, px.

  

**Returns** { void | boolean }

​	Only if this method returns `true` will cause a `forceUpdate` call. 



#### Deprecated Lifecycle Methods

**BEWARE** If you override these lifecycle methods when declare your class, the listener may not work as supposed. You need to use the new methods given as follow instead.

* _`componentDidMount`_ -> **`componentDidMountRE`**
* _`componentWillUnmount`_ -> **`componentWillUnmountRE`**



## Use

> *[src/demo.tsx](https://github.com/AntoineYANG/You-ResponsiveComponent/blob/master/src/demo.tsx)*

```tsx
import React from "react";
import ResponsiveComponent from "you-responsivecomponent";

interface Size {
    w: number;
    h: number;
};

class MyResponsiveCompo extends ResponsiveComponent<{}, {}> {
    
    protected size: Size;
    
    public constructor(props: {}) {
        super(props);
        this.state = {};
        
        this.size = {
            w: NaN,
            h: NaN
        };
    }
    
    public render() {
        return (
            <div>
                <p>
                    { `WIDTH=${ this.size.w } HEIGHT=${ this.size.h }` }
                </p>
            </div>
        );
    }
    
    public componentWillResize(WIDTH: number, HEIGHT: number) {
        if (WIDTH === this.size.w && HEIGHT === this.size.h) {
            return false;
        } else {
            this.size.w = WIDTH;
            this.size.h = HEIGHT;
            return true;
        }
    }
    
};
```



## Examples

View [**You-BilibiliFlv**](https://github.com/AntoineYANG/You-BilibiliFlv). 



## Contributing

Feel free to contribute by submitting a pull request.

---
_Source: https://npm.io/package/you-responsivecomponent · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._