reactjs event listener window.resize

Question

I am new to reactjs and I am trying to do a table exactly like this one in the fiddle using react : http://jsfiddle.net/hashem/crspu/555/

I created this component :

export default class Table extends Component {

    render(){
        return <table className="scroll">
            <thead>
                <tr>
                    <th>Head 1</th>
                    <th>Head 2</th>
                    <th>Head 3</th>
                    <th>Head 4</th>
                    <th>Head 5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                    <td>Content 4</td>
                    <td>Content 5</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Lorem ipsum dolor sit amet.</td>
                    <td>Content 3</td>
                    <td>Content 4</td>
                    <td>Content 5</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                    <td>Content 4</td>
                    <td>Content 5</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                    <td>Content 4</td>
                    <td>Content 5</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                    <td>Content 4</td>
                    <td>Content 5</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                    <td>Content 4</td>
                    <td>Content 5</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                    <td>Content 4</td>
                    <td>Content 5</td>
                </tr>
            </tbody>
        </table>
    }

}

Can you please help me in handling event listener of resize as shown in the example from jquery to react way ?

There is nothing about react. Just use plain javascript or jquery to handle window resize event. You can copy code from example you provided. — siwymilek
– siwymilek, Commented Jan 13, 2016 at 10:19
how about facebook.github.io/react/tips/dom-event-listeners.html — sisimh
– sisimh, Commented Jan 13, 2016 at 10:36

lasekio · Accepted Answer · 2016-02-15 11:31:56Z

2

Just register plain DOM events in componentWillMount() {} and remember to unbind them in componentWIllUnmount() {}.

answered Feb 15, 2016 at 11:31

lasekio

3181 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

generalG · Accepted Answer · 2018-01-25 16:44:28Z

2

This will allow you to watch for resize events:

componentDidMount() {
        this.handleResize();
        window.addEventListener('resize',  this.handleResize.bind(this));
}


handleResize() {
           console.log("I've been resized!");
}

answered Jan 25, 2018 at 16:44

generalG

3513 silver badges4 bronze badges

Collectives™ on Stack Overflow

reactjs event listener window.resize

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related