react-dirty-form
A form input component library
Install
npm install --save react-dirty-form
Demonstration
Usage
import React, { useEffect } from 'react'import { useForm, TextInput } from 'react-dirty-form'; const App = () => { const { form, setForm, isDirty, handleInputChange, handleSubmit } = useForm(postFormToServer); useEffect(() => { setForm({ username: 'user1', password: 'password1' }); }, []); function customPasswordValidation(value: string): boolean { return !(value.toLowerCase() === value || value.toUpperCase() === value); } function postFormToServer() { console.log("Sending form: ", form); } return ( <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}> <TextInput name="username" isDirty={isDirty} value={form.username} onChange={handleInputChange} minLength={3} maxLength={12} containerStyle={containerStyle} containerErrorStyle={containerErrorStyle} labelStyle={labelStyle} labelErrorStyle={labelErrorStyle} inputStyle={inputStyle} inputErrorStyle={inputErrorStyle} errorMessageStyle={errorMessageStyle} label="Username" /> <TextInput name="password" isDirty={isDirty} value={form.password} onChange={handleInputChange} minLength={3} containerStyle={containerStyle} containerErrorStyle={containerErrorStyle} customValidation={{ validator: customPasswordValidation, errorMessage: "Passwords must contain at least one upper and one lower case letter" }} labelStyle={labelStyle} labelErrorStyle={labelErrorStyle} inputStyle={inputStyle} inputErrorStyle={inputErrorStyle} errorMessageStyle={errorMessageStyle} isRequired isPassword label="Password" /> <button style={{ marginBlockEnd: '10px' }} onClick={handleSubmit}>Submit</button> </div> );} export default App; const containerStyle = ` display: flex; user-select: none; flex-direction: column; align-items: center; font-family: 'Helvetica'; margin-block-end: 10px;`; const containerErrorStyle = ` color: red;`; const labelStyle = ` font-size: 12px; color: gray; margin-block-end: 7px; transition: color 0.15s ease-in-out;`; const labelErrorStyle = ` color: darkred;`; const inputStyle = ` outline: none; border: 1px solid #E8E8E8; height: 30px; font-size: 12px; padding: 7px 7px; box-sizing: border-box; max-width: 150px; width: 100%; transition: border 0.15s ease-in-out; &:hover { border-color: lightgray; } &:focus { border-color: lightgray; }`; const inputErrorStyle = ` border: 1px solid red; &:hover { border-color: red; } &:focus { border-color: red; }`; const errorMessageStyle = ` margin-block-start: 7px; color: red; font-size: 12px;`;
JSX Structure - Text Input
<Container> <LabelText>{props.label}</LabelText> <Input value={props.value}/> <ErrorMessage>{errorMessage}</ErrorMessage></Container>
License
MIT © omerbresinski