reactrix

1.0.7 • Public • Published

GitHub version GitHub GitHub repo size GitHub issues GitHub tag (latest by date) node-current npm

Validation is the most important aspect while designing an application. It validates the incoming data. Reactrix provides a convenient method `useValidate` to validate incoming data with a variety of powerful validation rules.

Simple, lightweight model-based validation for React Hooks Inspired by PHP Framework Laravel's validation

Features

  • 🤗 Familiar and easy to setup.
  • 🌍 i18n Support and error Messages in different locales.
  • 👊 Written in JavaScript.
  • 🗃 No dependencies.

📦 Installation

Install it with yarn:

yarn add reactrix --save

Or with npm:

npm install reactrix --save

🏷 Usage

Let's define some validations in React components

import React, { useState } from 'react';
import { useValidate } from 'reactrix';
 
function Login(props) {
  const [data, setData] = useState({});
  const [msg, setValidator] = useValidate();
  
  const handleChange = (event) => {
    setData({
      ...data,
      [event.target.name]: event.target.value
    );
  }
  
  const handleSubmit = (event) => {
    event.preventDefault();
    setValidator(data, {
      email: 'required|email',
      password: 'required|string'
    }); 
   
  }
   
    
  return (
    <form>  
        <div className="container">   
          <label>Email : </label>   
          <input type="email" placeholder="Enter Email" name="email" onChange={handleChange} />  
          <label>Password : </label>   
          <input type="password" placeholder="Enter Password" name="password" onChange={handleChange} />  
          <button type="submit" onClick={handleSubmit}>Login</button>     
          Forgot <a href="#"> password? </a>   
        </div>
    </form>
  );
  
}
 

💅 You can use custom react component or ui library like react-bootstrap to display error messages.

Reactrix has built-in localization support for validation messages. The default language for Reactrix is en in order to set the locale you pass the locale key/code to the localize method:

const [msg, setValidator] = useValidate('fr');

🌍 Supported Locales

Reactrix support english and french languages. This is visible in the register javascript file, which can be found in the src directory. Therefore, if you want to use multiple languages, you will have to add them to the locale folder.

All the language files should return an array of keyed strings as shown below.

Step1 - Create 2 files for languages − Spanish, German. Save Arabic file at locale/de.json

{
  "messages": {
    "alpha": "{{input}} darf nur alphabetische Zeichen enthalten"
  }
}
{
  "messages": {
    "alpha": "El campo {{input}} solo debe contener letras"
  }
}

Step2 - Export spanish and German languages from src/register.js

// export all Reactrix supported locales.
export { default as de } from '../locale/german.json';
export { default as es } from '../locale/spanish.json';

🚦Common Rules

Keyword Description
Common Validator
alpha Checks if the string contains only letter(a-zA-Z)
alphaNum Checks if the string contains only letters and numbers
ascii Checks if the string contains ASCII chars only
base32 Checks if a string is base32 encoded
base64 Checks if a string is base64 encoded
boolean Checks if a value is a boolean
creditCard Checks if the string is a credit card
date Checks if a value is a date
decimal Checks if a value is a decimal
email Checks if the string is an email
ean Checks if the string is an EAN(European Article Number)
function Checks if the object is function
hexColor Checks if the string is a hexadecimal color
integer Checks if the value is an integer number
ipAddress Checks if the string is an IP (version 4 or 6)
lowercase Checks if the string is lowercase
mimeType Checks if the string matches to a valid MIME type format
numeric Checks if a value is a number
object Checks if a value is an object
octal Checks if a value is an octal
port Checks if the string is a Port
postal Checks if the string is a postal code. Supported locales are ([ 'AD', 'AT', 'AU', 'AZ', 'BE', 'BG', 'BR', 'CA', 'CH', 'CZ', 'DE', 'DK', 'DZ', 'EE', 'ES', 'FI', 'FR', 'GB', 'GR', 'HR', 'HU', 'ID', 'IE' 'IL', 'IN', 'IR', 'IS', 'IT', 'JP', 'KE', 'LI', 'LT', 'LU', 'LV', 'MT', 'MX', 'NL', 'NO', 'NP', 'NZ', 'PL', 'PR', 'PT', 'RO', 'RU', 'SA', 'SE', 'SI', 'TN', 'TW', 'UA', 'US', 'ZA', 'ZM' ]) or any.
string Checks if the string is a string
undefined Checks if the string is undefined
uppercase Checks if the string is uppercase
url Checks if the string is url
ISO
ISO31661Alpha2 Checks if the string is a valid ISO 3166-1 alpha-2 officially assigned country code
ISO31661Alpha3 Checks if the string is a valid ISO 3166-1 alpha-3 officially assigned country code
Currency
bitcoin Checks if the string is a valid BTC address
ethereum Checks if the string is an Ethereum address using basic regex. Does not validate address checksums
Hash
md4 Checks if the string is a valid md4 algorithm
md5 Checks if the string is a valid md5 algorithm
sha1 Checks if the string is a valid sha1 algorithm
sha256 Checks if the string is a valid sha256 algorithm
sha384 Checks if the string is a valid sha384 algorithm
sha512 Checks if the string is a valid sha512 algorithm

📢 Compatibility

This library uses ES6 Promises so be sure to provide a polyfill for it for the browsers that do not support it.

📋 Changelog

Please see CHANGELOG for more information what has changed recently.

📒 Samples

Take a look on samples in ./sample for more examples of usages.

👨‍💻 Contributing

Thanks goes to these wonderful people (emoji key):

Yasser A.Idrissi
Yasser A.Idrissi

💻 📖 🤔 👀 ⚠️

You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide.

📝 License

The reactrix Library is open-source software licensed under the MIT license.

Package Sidebar

Install

npm i reactrix

Weekly Downloads

2

Version

1.0.7

License

MIT

Unpacked Size

168 kB

Total Files

10

Last publish

Collaborators

  • yasserameur