React UI Components Documentation

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPasswordInput from 'jqwidgets-react/react_jqxpasswordinput.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPasswordInput from 'jqwidgets-react/react_jqxpasswordinput.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the localization property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPasswordInput from 'jqwidgets-react/react_jqxpasswordinput.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21} localization={localization}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the maxLength property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPasswordInput from 'jqwidgets-react/react_jqxpasswordinput.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21} maxLength={7}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the placeHolder property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPasswordInput from 'jqwidgets-react/react_jqxpasswordinput.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21} placeHolder={'Enter a Password'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the passwordStrength property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPasswordInput from 'jqwidgets-react/react_jqxpasswordinput.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21} passwordStrength={passwordStrength}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPasswordInput from 'jqwidgets-react/react_jqxpasswordinput.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the strengthColors property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPasswordInput from 'jqwidgets-react/react_jqxpasswordinput.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21} showStrength={true} strengthColors={{ tooShort: "Red", weak: "Red", fair: "Yellow", good: "Blue", strong: "Green" }}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showStrength property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPasswordInput from 'jqwidgets-react/react_jqxpasswordinput.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21} showStrength={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showStrengthPosition property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPasswordInput from 'jqwidgets-react/react_jqxpasswordinput.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21} showStrength={true} showStrengthPosition={'left'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the strengthTypeRenderer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPasswordInput from 'jqwidgets-react/react_jqxpasswordinput.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21} strengthTypeRenderer={strengthTypeRenderer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showPasswordIcon property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPasswordInput from 'jqwidgets-react/react_jqxpasswordinput.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21} showPasswordIcon={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPasswordInput from 'jqwidgets-react/react_jqxpasswordinput.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPasswordInput from 'jqwidgets-react/react_jqxpasswordinput.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the value in the input is changed.

Code examples

Bind to the change event of jqxPasswordInput.

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

    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {               
        return (
            <JqxPasswordInput ref='myPasswordInput'
                 width={300} height={21}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));