@k8pai/tailwind-inputs

Include tailwind configured form fields with validations in your React projects easily with tailwind-inputs, which utilizes ES6 imports that allows you to Manage validations and maintainability a piece of cake.

Installation (for standard modern project)

npm install @k8pai/tailwind-inputs --save

example usage

import { TiText } from '@k8pai/tailwind-inputs';

<TiText
    name={'firstName'}
    label={'First Name'}
    value={firstName}
    submit={submit}
    onChange={(e) => setFirstName(e.target.value)}
    validate="default"
    errorMessage="This field should not be empty"
/>;

View the documentation for further usage examples and how to use tailwind-inputs.

Configuration

props usage

Managing state

It's always painful to have a

import React, { useState } from 'react';
import { TiText, TiMail, TiPassword } from '@k8pai/tailwind-inputs';

function Form() {
    const [submit, setSubmit] = useState(false);
    const [formData, setFormData] = useState({
        username: '',
        email: '',
        password: '',
    });

    const handleSubmit = (event) => {
        event.preventDefault();
        setSubmit(true);
        // ... rest of your code goes here
    };

    const handleChange = (event) => {
        const { name, value } = event.target;
        setFormData((prevFormData) => ({
            ...prevFormData,
            [name]: value,
        }));
    };

    return (
        <form onSubmit={handleSubmit}>
            <TiText
                name={'username'}
                label={'Username'}
                value={formData.username}
                submit={submit}
                onChange={handleChange}
                validate="default"
            />
            ;
            <TiMail
                name={'email'}
                label={'Mail'}
                value={formData.email}
                submit={submit}
                onChange={handleChange}
                validate="email"
            />
            ;
            <TiPassword
                name={'password'}
                label={'Password'}
                value={firstName}
                submit={submit}
                onChange={handleChange}
                validate="password"
            />
            ;
        </form>
    );
}

Demo

TBD

Related Projects

• customizer

Licence

MIT