Sizing in React TextBox component

01 Dec 2022 / 3 minutes to read

You can render the TextBox in two different sizes.

Property	Description
Normal	By default, the TextBox is rendered with normal size.
Small	You need to add `e-small` class to the input element, or else add to the input container.

[Class-component]

Source

Preview

index.jsx

index.css

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
export default class Default extends React.Component {
    render() {
        return (<div>
    <h4> Normal Size </h4>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
    </div>

    <div className="e-float-input">
      <input type='text' required={true} onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
      <span className="e-input-group-icon e-input-popup-date" onMouseDown={this.onIconMouseDown} onMouseUp={this.onIconMouseUp}/>
    </div>

    <h4> Small Size </h4>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
    </div>

    <div className="e-float-input e-small">
      <input type='text' required={true} onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
      <span className="e-input-group-icon e-input-popup-date" onMouseDown={this.onIconMouseDown} onMouseUp={this.onIconMouseUp}/>
    </div>
</div>);
    }
    onInputFocus(args) {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
            args.target.parentElement.classList.add('e-input-focus');
        }
        else {
            args.target.parentElement.parentElement.classList.add('e-input-focus');
        }
    }
    onInputBlur(args) {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
            args.target.parentElement.classList.remove('e-input-focus');
        }
        else {
            args.target.parentElement.parentElement.classList.remove('e-input-focus');
        }
    }
    onIconMouseDown(args) {
        args.persist();
        setTimeout(() => {
            args.target.classList.add('e-input-btn-ripple');
        }, 300);
    }
    onIconMouseUp(args) {
        args.target.classList.remove('e-input-btn-ripple');
    }
}
ReactDOM.render(<Default />, document.getElementById('input-container'));

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
#input-container {
  width: 240px;
  margin: 0 auto;
  padding: 20px 0px;
}

.e-input-group-icon:before {
  font-family: e-icons;
}

.e-input-group .e-input-group-icon.e-input-popup-date {
  font-size:16px;
}

.e-input-group-icon.e-input-popup-date:before {
  content: "\e901";
}

#input-container .e-input-group {
  margin: 26px 0;
}

#input-container .e-float-input {
  margin: 26px 0;
}

.wrap label {
font-weight:bold;
}

import * as React from "react";
import * as ReactDOM from "react-dom";

export default class Default extends React.Component {
  public render() {
   return (
    <div>
    <h4> Normal Size </h4>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus = {this.onInputFocus} onBlur = {this.onInputBlur} />
    </div>

    <div className="e-float-input">
      <input type='text' required = {true} onFocus = {this.onInputFocus} onBlur = {this.onInputBlur}/>
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus = {this.onInputFocus} onBlur = {this.onInputBlur}/>
      <span className="e-input-group-icon e-input-popup-date" onMouseDown = {this.onIconMouseDown} onMouseUp = {this.onIconMouseUp}/>
    </div>

    <h4> Small Size </h4>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus = {this.onInputFocus} onBlur = {this.onInputBlur}/>
    </div>

    <div className="e-float-input e-small">
      <input type='text' required = {true} onFocus = {this.onInputFocus} onBlur = {this.onInputBlur} />
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus = {this.onInputFocus} onBlur = {this.onInputBlur} />
      <span className="e-input-group-icon e-input-popup-date" onMouseDown = {this.onIconMouseDown} onMouseUp = {this.onIconMouseUp}/>
    </div>
</div>
  );
  }

  public onInputFocus(args: React.FocusEvent) {
      if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
        ((args.target as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus');
      } else {
        (((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus')
      }
  }

  public onInputBlur(args: React.FocusEvent) {
      if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
        ((args.target as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
      } else {
        (((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
      }
  }

  public onIconMouseDown(args: React.MouseEvent) {
      args.persist();
      setTimeout(
          () => {
              (args.target as HTMLElement).classList.add('e-input-btn-ripple');
          },
      300);
  }

  public onIconMouseUp(args: React.MouseEvent) {
      (args.target as HTMLElement).classList.remove('e-input-btn-ripple');
  }
}

ReactDOM.render(<Default />, document.getElementById('input-container'));

[Functional-component]

Source

Preview

index.jsx

index.css

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
function Default() {
    return (<div>
    <h4> Normal Size </h4>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus={onInputFocus} onBlur={onInputBlur}/>
    </div>

    <div className="e-float-input">
      <input type='text' required={true} onFocus={onInputFocus} onBlur={onInputBlur}/>
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus={onInputFocus} onBlur={onInputBlur}/>
      <span className="e-input-group-icon e-input-popup-date" onMouseDown={onIconMouseDown} onMouseUp={onIconMouseUp}/>
    </div>

    <h4> Small Size </h4>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus={onInputFocus} onBlur={onInputBlur}/>
    </div>

    <div className="e-float-input e-small">
      <input type='text' required={true} onFocus={onInputFocus} onBlur={onInputBlur}/>
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus={onInputFocus} onBlur={onInputBlur}/>
      <span className="e-input-group-icon e-input-popup-date" onMouseDown={onIconMouseDown} onMouseUp={onIconMouseUp}/>
    </div>
</div>);
    function onInputFocus(args) {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
            args.target.parentElement.classList.add('e-input-focus');
        }
        else {
            args.target.parentElement.parentElement.classList.add('e-input-focus');
        }
    }
    function onInputBlur(args) {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
            args.target.parentElement.classList.remove('e-input-focus');
        }
        else {
            args.target.parentElement.parentElement.classList.remove('e-input-focus');
        }
    }
    function onIconMouseDown(args) {
        args.persist();
        setTimeout(() => {
            args.target.classList.add('e-input-btn-ripple');
        }, 300);
    }
    function onIconMouseUp(args) {
        args.target.classList.remove('e-input-btn-ripple');
    }
}
ReactDOM.render(<Default />, document.getElementById('input-container'));

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
#input-container {
  width: 240px;
  margin: 0 auto;
  padding: 20px 0px;
}

.e-input-group-icon:before {
  font-family: e-icons;
}

.e-input-group .e-input-group-icon.e-input-popup-date {
  font-size:16px;
}

.e-input-group-icon.e-input-popup-date:before {
  content: "\e901";
}

#input-container .e-input-group {
  margin: 26px 0;
}

#input-container .e-float-input {
  margin: 26px 0;
}

.wrap label {
font-weight:bold;
}

import * as React from "react";
import * as ReactDOM from "react-dom";

function Default() {
   return (
    <div>
    <h4> Normal Size </h4>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus = {onInputFocus} onBlur = {onInputBlur} />
    </div>

    <div className="e-float-input">
      <input type='text' required = {true} onFocus = {onInputFocus} onBlur = {onInputBlur}/>
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus = {onInputFocus} onBlur = {onInputBlur}/>
      <span className="e-input-group-icon e-input-popup-date" onMouseDown = {onIconMouseDown} onMouseUp = {onIconMouseUp}/>
    </div>

    <h4> Small Size </h4>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus = {onInputFocus} onBlur = {onInputBlur}/>
    </div>

    <div className="e-float-input e-small">
      <input type='text' required = {true} onFocus = {onInputFocus} onBlur = {onInputBlur} />
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus = {onInputFocus} onBlur = {onInputBlur} />
      <span className="e-input-group-icon e-input-popup-date" onMouseDown = {onIconMouseDown} onMouseUp = {onIconMouseUp}/>
    </div>
</div>
  );

  function onInputFocus(args: React.FocusEvent) {
      if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
        ((args.target as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus');
      } else {
        (((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus')
      }
  }

  function onInputBlur(args: React.FocusEvent) {
      if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
        ((args.target as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
      } else {
        (((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
      }
  }

  function onIconMouseDown(args: React.MouseEvent) {
      args.persist();
      setTimeout(
          () => {
              (args.target as HTMLElement).classList.add('e-input-btn-ripple');
          },
      300);
  }

  function onIconMouseUp(args: React.MouseEvent) {
      (args.target as HTMLElement).classList.remove('e-input-btn-ripple');
  }
}

ReactDOM.render(<Default />, document.getElementById('input-container'));

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!