Getting started with React TextBox component

01 Jul 2022 / 4 minutes to read

This section briefly explains about how to create a simple TextBox through CSS classes using Create React App.

Dependencies

The following list of dependencies are required to use the TextBox component in your application.

|-- @syncfusion/ej2-react-inputs
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-base

Installation and Configuration

You can use create-react-app to setup the applications. To install create-react-app run the following command.

npm install -g create-react-app

Start a new project using create-react-app command as follows.

create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstart

To install TextBox component, use the following command.

npm install @syncfusion/ej2-react-inputs –save

The above package installs Input dependencies which are required to render the TextBox component in React environment.
The TextBox CSS files are available in the ej2-react-inputs package folder. This can be referenced in your application using the following code.

[src/App.css]

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-inputs/styles/material.css";

The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific components. This web tool is useful to combine the required component scripts and styles in a single file.

Adding TextBox to the application

Return the HTML input element with e-input class within render method in src/App.tsx file to render the TextBox component as like below code.

import * as React from "react";
import './App.css';
export default class App extends React.Component<{}, {}> {
public render() {
  return (
    // element which is going to render the TextBox
    <input className="e-input" type="text" placeholder="Enter Name" />
  );
}
};

Adding icons to the TextBox

You can create a TextBox with icon as a group by creating the parent div element with the class e-input-group and add the icon element as span with the class e-input-group-icon. For detailed information, refer to the Groups section.

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

export default class Default extends React.Component {

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


public onInputFocus(args: React.FocusEvent) {
 ((args.target as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus');
}

public onInputBlur(args: React.FocusEvent) {
 ((args.target 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'));

.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";
}

Run the application in the browser using the following command.

npm start

Output will be as follows:

Source

Preview

index.jsx

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
export default class Default extends React.Component {
    render() {
        return (<div className="e-input-group">
    <input className="e-input" name="input" type="text" onFocus={this.onInputFocus} onBlur={this.onInputBlur} placeholder="Enter Date"/>
    <span className="e-icons e-input-group-icon e-input-popup-date" onMouseDown={this.onIconMouseDown} onMouseUp={this.onIconMouseUp}/>
</div>);
    }
    onInputFocus(args) {
        args.target.parentElement.classList.add('e-input-focus');
    }
    onInputBlur(args) {
        args.target.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'));

import * as React from "react";
import * as ReactDOM from "react-dom";
export default class Default extends React.Component {

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


public onInputFocus(args: React.FocusEvent) {
((args.target as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus');
}

public onInputBlur(args: React.FocusEvent) {
((args.target 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'));

Floating Label

The floating label TextBox floats the label above the TextBox after focusing, or filled with value in the TextBox. You can create the floating label TextBox by using the floatLabelType API.