import Validator from 'validator.tool';

import { useRef, useState } from 'react';
import Validator from 'validator.tool';

function Demo() {
  const validator = useRef(new Validator({
    validate: (value, values, field) => {
      if (field === 'password' && !value) {
        return 'Required!';
      }
    }
  }));
  const [data, setData] = useState({
    email: 'kennyiseeyou@gmail.com'
  });
  const [upState, forceUpdate] = useState(0);

  useEffect(() => {
    if (!validator.current.initValues) {
      validator.current.initValues = data;
    }
  }, []);

  function handleSubmit(evn) {
    evn && evn.preventDefault();
    validator.current.showMessages();
    forceUpdate(upState + 1);
  }

  function handleReset() {
    validator.current.hideMessages();
    const v = validator.current.reset();
    setData({ ...v });
  }

  function handleChange(env) {
    const target = env.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    setData({ ...data, [name]: value });
  }

  return (
    <form onSubmit={handleSubmit} onReset={handleReset} onChange={handleChange}>
      <div>
        <label htmlFor="email">EMail:</label>
        <input type="email" name="email" defaultValue={data.email} />
        <p>
          {validator.current.message('email', data.email, {
            validate: (val) => !/^[A-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(val) ? `The ${val} must be a valid email address.` : ''
          })}
        </p>
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input type="password" name="password" />
        <p>
          {validator.current.message('password', data.password)}
        </p>
      </div>
      <div>
        <label htmlFor="repassword">Confirm Password:</label>
        <input type="repassword" name="repassword" />
        <p>
          {validator.current.message('repassword', data.repassword)}
        </p>
      </div>
      <div>
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
      </div>
    </form>
  );
}

import React, { useRef } from 'react';
import { Text, View, Button } from 'react-native';
import Validator from 'validator.tool';

const WelcomeScreen = () => {
  const [text, onChangeText] = React.useState('Useless Text');
  const [, forceUpdate] = React.useState();
  const validator = useRef(new Validator({
    validate: (value, values, field) => {
      if (field === 'username' && value.length > 3) {
        return 'Required!';
      }
    },
  }));

  return (
    <View>
      <TextInput onChangeText={onChangeText} value={text} />
      <Text>
        {validator.current.message('username', text)}
      </Text>
      <Button
        onPress={() => {
          validator.current.showMessages();
          forceUpdate(1);
        }}
        title="Submit"
        color="#841584"
      />
    </View>
  );
};