Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the displayMember property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} displayMember={'ContactName'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dropDownWidth property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} dropDownWidth={300}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the items property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} items={10}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the maxLength property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} maxLength={10}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minLength property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} minLength={2}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the opened property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} opened={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the placeHolder property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the popupZIndex property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} popupZIndex={99999}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the query property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} query={'item'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the renderer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} renderer={renderer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the roundedCorners property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} roundedCorners={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the scrollBarSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} scrollBarSize={15}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the searchMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} searchMode={'containsignorecase'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the source property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the valueMember property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'} valueMember={'CompanyName'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxTextArea.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTextArea.on('change', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the auto-suggest popup is closed.

Code examples

Bind to the close event of jqxTextArea.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTextArea.on('close', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the auto-suggest popup is opened.

Code examples

Bind to the open event of jqxTextArea.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTextArea.on('open', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when an item is selected from the auto-suggest popup.

Code examples

Bind to the select event of jqxTextArea.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTextArea.on('select', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTextArea.destroy();
    }

    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTextArea.focus();
    }

    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTextArea.refresh();
    }

    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTextArea.render();
    }

    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTextArea.selectAll();
    }

    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myTextArea.val();
    }

    render() {       
        
        return (
            <JqxTextArea ref='myTextArea'
                width={300} height={90} placeHolder={'Enter a sentence'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));