Skip to content
Password input field with built in strength meter and with simples css classes to be replace as yours
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
public
src
.babelrc
.editorconfig
.eslintrc
.gitignore
.postcssrc
.travis.yml
LICENSE
README.md
package-lock.json
package.json
webpack.config.js

README.md

Build Status Coverage Status

React-Nice-Input-Password

A input password control built with and for React

Demo

https://codesandbox.io/s/o1v16rqqrz

Sample

Installation

The easiest way to use react-select is to install it from npm and build it into your app with Webpack.

npm install react-nice-input-password --save

You can then import react-nice-input-password and its styles in your application as follows:

import NiceInputPassword from 'react-nice-input-password';
import 'react-nice-input-password/dist/react-nice-input-password.css';

Usage

React-Nice-Input-Password uses the traditional input[type=password] behinde the cenes, but you can now validate the strenght level of this value and show it to your users.

The strenght can be passed as a array of objects to a prop of the component called securityLevels.

You can see a sample of code bellow:

import React from 'react';
import NiceInputPassword from 'react-nice-input-password';
import 'react-nice-input-password/dist/react-nice-input-passord.css';

class App extends React.Component {
  state = {}
  handleChange = (data) => {
    this.setState({
      [data.name]: data.value,
    });
    console.log(`Value: ${passwordField.value}`);
  }
  render() {
    const { passwordField } = this.state;
    const value = passwordField && passwordField.value;

    return (
      <NiceInputPassword
        label="My password field"
        name="passwordField"
        value={value}
        securityLevels={[
        {
          descriptionLabel: 'At least 1 number',
          validator: /.*[0-9].*/,
        },
        {
          descriptionLabel: 'At least 1 letter',
          validator: /.*[a-zA-Z].*/,
        },
        {
          descriptionLabel: 'At least 1 uppercase letter',
          validator: /.*[A-Z].*/,
        },
        ]}
        showSecurityLevelBar
        showSecurityLevelDescription
        onChange={this.handleChange}
      />
    );
  }
}

Custom classNames

You can provide a custom className to the Nice Input Password and custom className to the color levels, which will be added to input, description and bullets level elements using dangerClassName, warningClassName and successClassName.

Select Props

Property Type Default Description
label string or function undefined The label showned on top of input element
name string undefined The name used on input element name={name}
className string (empty string) Optional class to be passed to niceinputpassword context
normalClassName string 'none' The className used on level color
dangerClassName string 'danger' The className used on level color
warningClassName string 'warning' The className used on level color
successClassName string 'success' The className used on level color
value string undefined The value to be renderized on element
showSecurityLevelBar bool false Key to show or not the security level bullets of password
showSecurityLevelDescription bool false Key to show or not the security level description securityLevels object
securityLevels array of objects [] The array containing the objects to validate the password, see a sample of this object on after this table
onChange func undefined onChange handler: function(newOption) {} - Ill receiv a object with { name, value, isValid}

License

MIT Licensed. Copyright (c) Renan Borges 2018.

You can’t perform that action at this time.