Package Exports
- fomikon
- fomikon/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (fomikon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
😊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.
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 fomikonimport 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 👷