fomikon v1.0.3

😊Feel to contact me if you wanna join the project!

👾FOMIKON👾 Form validation library for React

Fomikon makes your stressful form validation work easy. It returns the number depending on the status during form validation.

Apache 2.0 License.

Author

• Yuhki Hayashi

Contributors

• Who wanna be listed here? Feel free to message me! 😉

How it works

By implementing fomikon, fomikon returns the number depending on if it's the input field.

for example

• user clicked the input => 2
• user type wrong email address and move to the next input => 3
• user fixed the email => 0

And there is a function that checks if all input fields are validated. So, You can use this function to activate form submit button.

Usage

Installation

$ npm i fomikon

import Fomikon from "fomikon";

const fomikon = new Fomikon();

Functions

atOnFocus();

atOnBlur();

atUseEffect();

atButtonDisable();

// You can call function like this 😉
const fomikon = new Fomikon();
fomikon.atButtonDisable();

Example

import React, { useState , useEffect} from "react";

export default function FormExample() {
  // Create state of the input
  const [email, setEmail] = useState("");

  // Create state for the validation
  //note* Please set 0 if the email is required.
  // FOMIKON will change the number depending on the status of the input.
  const [emailValidation, setEmailValidation] = useState(1);

  const fomikon = new Fomikon();

  //You can specify the regex for the each validation here
  //Regex is very powerful tool.
  //So I recommend you to learn basic if you don't know anything 💪
  const mailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

  // Create array data and set it in each functions FOMIKON offers.
  const fomikonMail = [
    email,
    setEmail,
    emailValidation,
    setEmailValidation,
    { require: true, regex: mailRegex },
  ];

  // This is for atButtonDisable() function
  const buttonDisable = [emailValidation]

// Maybe you should use memo or useMemo or something like that if you care about performance. 🐢
  useEffect{()=> {
    fomikon.atUseEffect(fomikonMail)
  },[ email,
    setEmail,
    emailValidation,
    setEmailValidation, regex]}

  const submitHandler = () => {
    const data = { email: email };
    console.log(data);
  };


  return (
    <div>
      <input
        type="email"
        placeholder="email"
        value={email}
        onChange={(e) => {
          setEmail(e.target.value);
        }}
        onFocus={() => {
          fomikon.atOnFocus(...fomikonMail);
        }}
        onBlur={() => {
          fomikon.atOnBlur(...fomikonMail);
        }}
      />
      <button onClick={submitHandler}　
      disable={()=> {
        fomikon.atButtonDisable(buttonDisable)
      }} >SUBMIT</button>
    </div>
  );
}

Disable esLint chant for the Lazy developer🧙‍♂️

// eslint-disable-next-line

👷Work in progress 👷