React-Nice-Input-Password

An input password built with and for React and works nicely with Material-UI

You can easily setup your own custom validation rules with regex!

Demo

https://codesandbox.io/s/o1v16rqqrz

Material UI Support

And more ...

Installation

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

Usage

import NiceInputPassword from 'react-nice-input-password';

// If you wanna use the basic css from this library (Optional)
import 'react-nice-input-password/dist/react-nice-input-password.css';

// If you are using NextJs (server side rendering)
import dynamic from "next/dynamic"
const NiceInputPassword = dynamic(() => import('react-nice-input-password'), {ssr: false});

React-Nice-Input-Password uses the traditional input[type=password] behinde the cenes. The strenght configuration can be passed as an array of objects to the prop 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,
    });
  }
  render() {
    const { passwordField } = this.state;
    const value = passwordField && passwordField.value;

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

Usage with Material-UI

import React from 'react';
import NiceInputPassword from 'react-nice-input-password';
import {TextField, InputLabel, Typography} from '@material-ui/core';
import LockIcon from '@material-ui/icons/Lock';

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

    return (
      <NiceInputPassword
        label="My password field"
        name="passwordField"
        value={value}
        showSecurityLevelBar
        onChange={this.handleChange}
        LabelComponent={InputLabel}
        InputComponent={TextField}
        InputComponentProps={{
          variant: 'outlined',
          InputProps: {
            endAdornment: <LockIcon />,
          }
        }}
        securityLevels={[
          {
            descriptionLabel: <Typography>1 number</Typography>,
            validator: /.*[0-9].*/,
          },
          {
            descriptionLabel: <Typography>1 lowecase letter</Typography>,
            validator: /.*[a-z].*/,
          },
          {
            descriptionLabel: <Typography>1 uppercase letter</Typography>,
            validator: /.*[A-Z].*/,
          },
        ]}
      />
    );
  }
}

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}
visible	boolean	false	Make the password visible by changing the input type to text
placeholder	string	(empty string)	The placeholder used on input element placeholder={placeholder}
className	string	(empty string)	Optional class to be passed to niceinputpassword context
style	object	undefined	Optional style to be passed to input field
LabelComponent	ReactComponent	input	Optional label component to be used
InputComponent	ReactComponent	input	Optional input component to be used
InputComponentProps	Object	null	Optional object to be passed to the custom InputComponent
renderLevelBarComponent	Render function	null	Optional function to return a custom levelbar component
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
startAdornment	ReactNode	undefined	Start adornment for this component
endAdornment	ReactNode	undefined	End adornment for this component
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: @params: { name, value, isValid}

License

MIT Licensed. Copyright (c) Renan Borges.