React UI Components Documentation

Gets or sets whether the widget is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();  
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
        disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets the widget's height. The value may be "auto", a number or a string like "Npx", where N is a number.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();  
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
        height={50}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the various text values used in the widget. Useful for localization.

Default value:

{ passwordStrengthString: "Password strength", tooShort: "Too short", weak: "Weak", fair: "Fair", good: "Good", strong: "Strong" }

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        localization: {
          passwordStrengthString: "Password strength",
          tooShort: "Very short",
          weak: "Weak Pass",
          fair: "Fair Pass",
          good: "Good Pass",
          strong: "Strong Pass"
        }
    }
  }  
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
        showStrength={true} localization={this.state.localization}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets the maximal number of characters in the password.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();  
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
        maxLength={7}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets the password input's placeholder text.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();  
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
        placeHolder={'Enter a Password'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

A callback function for defining a custom strength rule. The function has three parameters:

• First parameter - the value of the password.
• Second parameter - an object containing the numbers of different types of characters - letters, numbers and special keys.
• Third parameter - the default strength value, based on the built-in rule.

Note: The property showStrength should be set to true for passwordStrength to have an effect.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      passwordStrength: (password: string | number, characters: object, defaultStrength: string): any => {
        var length = password.length;
        var letters = characters.letters;
        var numbers = characters.numbers;
        var specialKeys = characters.specialKeys;
        var strengthCoefficient = letters + numbers + 2 * specialKeys + letters * numbers * specialKeys;
        var strengthValue;
        if (length < 4) {
          strengthValue = "Too short";
        } else if (strengthCoefficient < 10) {
          strengthValue = "Weak";
        } else if (strengthCoefficient < 20) {
          strengthValue = "Fair";
        } else if (strengthCoefficient < 30) {
          strengthValue = "Good";
        } else {
          strengthValue = "Strong";
        }
        return strengthValue;
      }
    }
  }  
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
        showStrength={true} passwordStrength={this.state.passwordStrength}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the right-to-left support is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();  
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
        rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the the colors used in the tooltip which shows the strength.

Default value:

{ tooShort: "rgb(170, 0, 51)", weak: "rgb(170, 0, 51)", fair: "rgb(255, 204, 51)", good: "rgb(45, 152, 243)", strong: "rgb(118, 194, 97)" }

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();  
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
        showStrength={true} strengthColors={{ tooShort: "Red", weak: "Red", fair: "Yellow", good: "Blue", strong: "Green" }}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets whether a tooltip which shows the password's strength will be shown.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();  
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
        showStrength={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets the position of the tooltip which shows the password strength.
Possible values:

• "top"
• "bottom"
• "left"
• "right"

Note: The property showStrength should be set to true for showStrengthPosition to have an effect.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();  
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
        showStrength={true} showStrengthPosition={'bottom'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

A callback function for custom rendering of the tooltip which shows the password strength. The function has three parameters:

• First parameter - the value of the password.
• Second parameter - an object containing the numbers of different types of characters - letters, numbers and special keys.
• Third parameter - the default strength value, based on the built-in rule.

Note: The property showStrength should be set to true for strengthTypeRenderer to have an effect.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      strengthTypeRenderer: (password: string | number, characters: object, defaultStrength: string): any => {
        var length = password.length;
        var letters = characters.letters;
        var numbers = characters.numbers;
        var specialKeys = characters.specialKeys;
        var strengthCoefficient = letters + numbers + 2 * specialKeys + letters * numbers * specialKeys;
        var strengthValue;
        var color;
        if (length < 8) {
          strengthValue = "Too short";
          color = "rgb(170, 0, 51)";
        } else if (strengthCoefficient < 20) {
          strengthValue = "Weak";
          color = "rgb(170, 0, 51)";
        } else if (strengthCoefficient < 30) {
          color = "rgb(255, 204, 51)";
          strengthValue = "Fair";
        } else if (strengthCoefficient < 40) {
          strengthValue = "Good";
          color = "rgb(45, 152, 243)";
        } else {
          strengthValue = "Strong";
          color = "rgb(118, 194, 97)";
        }
        return "<div style='color: " + color + ";'>" + strengthValue + "</div>";
      }
    }
  }  
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
        showStrength={true} strengthTypeRenderer={this.state.strengthTypeRenderer}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets whether the Show/Hide password icon will appear.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();  
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
        showPasswordIcon={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();  
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
        theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets the widget's width. The value may be "auto", a number or a string like "Npx", where N is a number.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();  
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
        width={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the change event of jqxPasswordInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();  
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} onChange={this.onChange} 
       
      />
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Renders the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();
 
  public componentDidMount(): void {
    this.myPasswordInput.current!.render();
  }
   
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Refreshes the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPasswordInput, { IPasswordInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpasswordinput';
 
class App extends React.PureComponent<{}, IPasswordInputProps> {
  private myPasswordInput = React.createRef<JqxPasswordInput>();
 
  public componentDidMount(): void {
    this.myPasswordInput.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxPasswordInput ref={this.myPasswordInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets the password. If the parameter is set, sets the value of the password in the input. If there is no parameter set, returns the string value of the password.