@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

| Key | Type | Default | Note | | -------------- | ------------------- | ------- | ------------------------------------------------- | | name | String | null | Name of the input field | | label | String | null | Label For the input field | | value | state variable | null | Value of the input field | | submit | boolean | false | Form Submission State, to check field validations | | onChange | setState function | null | Function to update value state variable | | validate | String | null | Can be set to validate fields | | errorMessage | String | | Custom Error message for validations | | className | String | | Can customize Fields with tailwind |

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