React how to handle resize of top border in a component

Question

Recently I created my tabbed drawer component using React, I would like to add another feature to make the drawer resizable dragging the top border up or down.

I understand that I can set the height in the component state, create a function to handle the event and when the this.state.height is change React will render again the component to the right height.

I understand that I can handle this with JQuery using the resizable function but if possible I would avoid to interact directly with the DOM since this is what React aims to do.

I started to code in JS few weeks ago and I am missing the points below:

• how can I handle or create an event in the top border of my div container id="drawer"?

• how can I make this event return a value that indicates where the mouse stopped in term of height to get a new value to call setStatus and render my component with the right height one more time?

Below my code:

define(function (require) {

    var React = require('react');
    var DrawerButton = require('./DrawerButton');
    require('./TabbedDrawer.less');

    class TabbedDrawer extends React.Component {
        constructor(props) {
            super(props);

            this.state = {
                drawerOpened: false,
                buttonSelected: null,
                drawerHeight: 0
            }
            this.openDrawer = this.openDrawer.bind(this);
            this.renderMyLabels = this.renderMyLabels.bind(this);
            this.resizeDrawer = this.resizeDrawer.bind(this);
        }

        renderMyLabels() {
            var renderedLabels = this.props.labels.map(function(label, _key) {
                return (
                    <DrawerButton 
                        functionDrawer={this.openDrawer}
                        labelKey={_key}
                        buttonSelected={this.state.buttonSelected}
                        drawerOpened={this.state.drawerOpened}>
                        {label}
                    </DrawerButton>
                );
            }, this);
            return renderedLabels;
        }

        openDrawer(buttonClicked) {
            if(this.state.drawerOpened && (buttonClicked == this.state.buttonSelected)) {
                this.setState({buttonSelected: null,
                               drawerOpened: !this.state.drawerOpened});
            } else if(this.state.drawerOpened && (buttonClicked != this.state.buttonSelected))  {
                this.setState({buttonSelected: buttonClicked});
            } else {
                this.setState({buttonSelected: buttonClicked,
                               drawerOpened: !this.state.drawerOpened});
            }
        }

        render() {
            const ElementToRender = (this.state.buttonSelected !== null) ? this.props.children[this.state.buttonSelected] : null;
            const myElement = (ElementToRender !== null) ? <ElementToRender /> : "";
            const drawerStyle = this.state.drawerOpened ? {display: 'block'} : {display: 'none'};
            const tabStyle = this.state.drawerOpened ? {bottom: '250px'} : {bottom: '0px'};
            return (
                <div id="testDrawer">
                    <span id="tabber" style={tabStyle}>
                        {this.renderMyLabels()}
                    </span>
                    <div id="drawer" style={drawerStyle}>
                        <div className="topLine" >
                        </div>
                        {myElement}
                    </div>
                </div>
            );
        }
    }
    return TabbedDrawer;
});

@import "./../../../../style/less/components/colors";

@-webkit-keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

#geppettoDrawer {
display: inline-block;
}

#tabber {
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  border-bottom: 0.5px solid rgb(252, 99, 32);
  width: 100%;
  display: block;
  margin-top: 0px;
  text-decoration: none;
  left: 0;
  bottom: 0;
  position: absolute;
  background: transparent;
}

#tabButton {
  color: @primary_color;
    margin: 0 auto;
    margin-bottom: 26px;
  position: relative;
  border-color: rgb(252, 99, 32);
  border: 0.5px;
  border-bottom: 0px;
    border-style: solid;
    box-shadow: none;
    text-shadow: none;
    width: 140px;
    height: 35px;
  padding: 7px 20px;
  text-align: center;
  display: inline-block;
  cursor: pointer!important;
  background: rgba(50, 50, 53, 0.8);
}

#drawer {
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  height: 250px;
  width: 100%;
  background-color: black;
  color: white;
  position: fixed;
  bottom: 0px;
  left: 0px;
  display: none;
  transition: opacity 1s ease-out;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  background: rgba(50, 50, 53, 0.8);
}

Answer 1

I would have a look at the available events here: https://reactjs.org/docs/events.html I would also view this other thread: Recommended way of making React component/div draggable