2.0.4 • Published 3 years ago
react-awesome-form v2.0.4
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).
1.0.16
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
2.0.3
3 years ago
2.0.4
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.0.11
3 years ago
1.0.10
3 years ago
1.0.15
3 years ago
1.0.14
3 years ago
1.0.13
3 years ago
1.0.12
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago