allow overriding CSS namespace (#66)

Author: mmw

README.md

@@ -92,9 +92,14 @@ Using in a __Universal JS App__ (server-side rendering):
 
 - An array of strings that zxcvbn will treat as an extra dictionary.
 
+#### namespaceClassName (Default: 'ReactPasswordStrength')
+
+- Used to control the CSS class namespace. CSS classes created by RPS will be prepended with this string.
+- If you change this prop you have to provide all CSS and it's recommended to import RSP from the universal JS build (`react-password-strength/dist/universal`)
+
 ### Classes
 
-_All styling is applied with CSS classes to allow custom styling and overriding._
+_All styling is applied with CSS classes to allow custom styling and overriding. Note that if you change the `namespaceClassName` prop the below classnames will be affected._
 - `ReactPasswordStrength` - namespace class and component wrapper
 - `is-strength-{0-4}` - modifier class indicating password strength
 - `ReactPasswordStrength-input` - password input field

src/index.js

@@ -14,6 +14,7 @@ export default class ReactPasswordStrength extends Component {
     inputProps: PropTypes.object,
     minLength: PropTypes.number,
     minScore: PropTypes.number,
+    namespaceClassName: PropTypes.string,
     scoreWords: PropTypes.array,
     style: PropTypes.object,
     tooShortWord: PropTypes.string,
@@ -26,6 +27,7 @@ export default class ReactPasswordStrength extends Component {
     defaultValue: '',
     minLength: 5,
     minScore: 2,
+    namespaceClassName: 'ReactPasswordStrength',
     scoreWords: ['weak', 'weak', 'okay', 'good', 'strong'],
     tooShortWord: 'too short',
     userInputs: [],
@@ -89,17 +91,18 @@ export default class ReactPasswordStrength extends Component {
   render() {
     const { score, password, isValid } = this.state;
     const {
-      scoreWords,
-      inputProps,
       className,
+      inputProps,
+      minLength,
+      namespaceClassName,
+      scoreWords,
       style,
       tooShortWord,
-      minLength,
     } = this.props;
 
-    const inputClasses = [ 'ReactPasswordStrength-input' ];
+    const inputClasses = [ `${namespaceClassName}-input` ];
     const wrapperClasses = [
-      'ReactPasswordStrength',
+      namespaceClassName,
       className ? className : '',
       password.length > 0 ? `is-strength-${score}` : '',
     ];
@@ -130,8 +133,8 @@ export default class ReactPasswordStrength extends Component {
           value={password}
         />
 
-        <div className="ReactPasswordStrength-strength-bar" />
-        <span className="ReactPasswordStrength-strength-desc">{strengthDesc}</span>
+        <div className={`${namespaceClassName}-strength-bar`} />
+        <span className={`${namespaceClassName}-strength-desc`}>{strengthDesc}</span>
       </div>
     );
   }