useInputValue

React hook that allow us an easy validation and manage styles.

Live demo - codesand

Versión español

const email = useInputValue()

1. Paramaters

Receive an object with the following keys

Option	Description	Type
initialValue	The initial value of the input	any
required	Says if the input is required	boolean
regEx	A regular expression to validate	RegExp
customValidation	A callback to perform a custom validation that return boolean	fn
errorMessage	An object with messages for the three types of errors required, regExp, customValidation	fn

Examples

Username validation

A username validation where the input is required and need to match with a regular expression

const regExpUsername = /^(?=.{5,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$/

const username = useInputValue({
  initialValue: '',
  required: true,
  regExp: regExpUsername,
})

Password matches

A password validation where the password inputs must be equals perfomed by a customValidation

const password1 = useInputValue({
  initialValue: '',
  required: true,
  regExp: regExpPassword,
})

const password2 = useInputValue({
  initialValue: '',
  required: true,
  customValidation: (value) => {
    return value == password1.value
  },
})

2. Return

Name	Description	Type
value	The value of the field	any
onChange	The function that update the state of the value	fn
valid	Indicates if the field entry is valid	boolean
showError	A variable that helps show error styles. Avoid displaying an error when the field has not been touched.	boolean
errors	An object with the errors present in the validation, could be empty or coul be one or more of these required, regExp, customValidation	object
updateShowError	An function to re-check if the input is valid, useful when an user submit the form and dont modified a field	fn

Examples

With className

You can use the key showError to put a class to show the correct error styles. Or use showError, required, regExp, customValidation to show error messages, in this case show just one of the possible errors at the same time, and prefer to show the required error message when the field is empty above the other possible errors. If the field is not empty can display another error if exists.

<input
  type="password"
  {...password1}
  className={`input ${password1.showError? 'error': ''}`}
/>
{
  password1.errors.required && password1.showError ?
  <Error>{password1.errors.required}</Error>
  : null
}
{
  password1.errors.regExp && password1.showError &&
 !password1.errors.required ?
  <Error>{password1.errors.regExp}</Error>
 : null
}
<input
  type="password"
  {...password2}
  className={`input ${password1.showError? 'error': ''}`}
/>
{
  password2.errors.customValidation && password2.showError
  && !password2.errors.required ?
  <Error>{password2.errors.customValidation}</Error>
: null
}

With styled-components

You can pass directly the all the variables using the spread operation and use styled-components to show the correct styles.

<Input type="password" {...password1} />
{/*
 Code to show the specific message error
 */}
<Input type="password" {...password2} />
{/*
  Code to show the specific message error
 */}

showError and valid are provided by the hook.

export const Input = styled.input`
  height: 32px;
  margin-bottom: 6px;
  padding-left: 16px;
  border: 1px solid #382042;
  ${(props) =>
    props.showError &&
    css`
      box-shadow: ${(props) =>
        props.valid ? null : '0 0 3px 2px rgba(255, 30, 30, 0.97)'};
      border-color: ${(props) => (props.valid ? '#382042' : 'transparent')};
    `}
`
export const Error = styled.span`
  font-size: 0.87em;
  color: rgba(255, 30, 30, 0.97);
  padding-left: 7px;
`