react-awesome-form
v2.0.4
Published
Awesome React Hooks, which allow you to control user entering
Downloads
52
Readme
Install
npm install react-awesome-form
Links
Quickstart
import "./styles.css";
import { useInput } from "react-awesome-form";
export default function App() {
const firstName = useInput(true, "", {
regExp: /^[a-zA-Zа-яА-Я ,.'-]+$/i,
required: true
});
const lastName = useInput(true, "", {
regExp: /^[a-zA-Zа-яА-Я ,.'-]+$/i,
required: true
});
return (
<div className="App">
<h1 class="title">React Awesome Form</h1>
<form className="form">
<label className="label">
<input
placeholder="Last Name"
className="input"
type="text"
{...lastName.handlers}
autoComplete={false}
/>
{lastName.error && <span className="error">Incorrect last name</span>}
</label>
<button type="submit" className="button">
Send
</button>
</form>
</div>
);
}
API
type InputValue = string | number | null | undefined;
interface InputProps {
regExp?: RegExp,
required?: boolean
}
interface IuseInputReturn {
resetInput: () => void,
handlers: {
onBlur: (e: any) => void,
onInput: (e: any) => void
},
setValue: (value: T) => void,
error: boolean | undefined,
value: () => InputValue
};
function useInput<T>(controlled: boolean, initial: T, options?: InputProps): IuseInputReturn
Main function useInput. The first argument is a boolean type (required argument), which declare controlled or uncontrolled input. The second one is a initial state of the input (required argument). The third one is an additional option for form (optional argument).