React UI Components

Show Demo List

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title id="Description"> ReactJS Password Input demo. This demo illustrates how to customize the rendering of the Strength Tooltip. </title> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> </head> <body> <div class="example-description" style="margin-bottom: 3em"> ReactJS Password Input demo. This demo illustrates how to customize the rendering of the Strength Tooltip. </div> <div id="app"></div> <script src="../build/passwordinput_customstrengthrendering.bundle.js"></script> </body> </html>

import React from 'react'; import ReactDOM from 'react-dom'; import JqxPasswordInput from '../../../jqwidgets-react/react_jqxpasswordinput.js'; class App extends React.Component { render() { // The passwordStrength enables you to override the built-in strength calculation. let passwordStrength = (password, characters, defaultStrength) => { let length = password.length; let letters = characters.letters; let numbers = characters.numbers; let specialKeys = characters.specialKeys; let strengthCoefficient = letters + numbers + 2 * specialKeys + letters * numbers * specialKeys; let 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; }; // The strengthTypeRenderer enables you to override the built-in rendering of the Strength tooltip. let strengthTypeRenderer = (password, characters, defaultStrength) => { let length = password.length; let letters = characters.letters; let numbers = characters.numbers; let specialKeys = characters.specialKeys; let strengthCoefficient = letters + numbers + 2 * specialKeys + letters * numbers / 2 + length; let strengthValue; let 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) { strengthValue = 'Fair'; color = 'rgb(255, 204, 51)'; } else if (strengthCoefficient < 40) { strengthValue = 'Good'; color = 'rgb(45, 152, 243)'; } else { strengthValue = 'Strong'; color = 'rgb(118, 194, 97)'; }; return '<div style="font-style: italic; font-weight: bold; color: "' + color + ';">' + strengthValue + '</div>'; }; return ( <JqxPasswordInput ref='passwordInput' width={200} height={25} placeHolder={'Enter password:'} showStrength={true} showStrengthPosition={'right'} /> ) } } ReactDOM.render(<App />, document.getElementById('app'));