This section briefly explains about how to create a simple TextBox through CSS classes using Create React App
.
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
create-react-app
to setup the
applications.
To install create-react-app
run the following command.npm install -g create-react-app
create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstart
npm install @syncfusion/ej2-react-inputs –save
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.
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" />
);
}
};
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";
}
npm start
Output will be as follows:
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'));
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.
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
render() {
return (<div className="App">
<div className="textboxes">
<h4>FloatLabelType as Auto</h4>
<TextBoxComponent placeholder="First Name" floatLabelType="Auto"/>
</div>
<div className="textboxes">
<h4>FloatLabelType as Always</h4>
<TextBoxComponent placeholder="Last Name" floatLabelType="Always"/>
</div>
</div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('input-container'));
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component<{}, {}> {
public render() {
return (
<div className="App">
<div className="textboxes">
<h4>FloatLabelType as Auto</h4>
<TextBoxComponent placeholder="First Name" floatLabelType="Auto"/>
</div>
<div className="textboxes">
<h4>FloatLabelType as Always</h4>
<TextBoxComponent placeholder="Last Name" floatLabelType="Always"/>
</div>
</div>
)
}
};
ReactDOM.render(<App />, document.getElementById('input-container'));
N> You can refer to our React TextBox feature tour page for its groundbreaking feature representations. You can also explore our React TextBox example to know how to render and configure the textbox.