ReuseJS React Input

Input component is the precursor of input-group component which provides functionality specific to input component like placeholder, disable input, autocomplet etc. Along with some additional features like show/hide passwords using props showPassword. Additionally since reusejs-input extends html-input it supports all the functionality of a default browser input like types, autocomplete, form, alt, for etc.

Form Styles

If you have been using input elements for long, especially if using tailwind for styling, you will have encountered the issue of overridding the default styles in input, especially on focus, such as ring, focus-border etc. Tailwind forms provide an easy to use set of utilities that allow users to override these styles quite easily.

To use form-input tailwind class in an input element you have to follow the following steps.

  1. Add @tailwindcss/forms to dev-dependencies.
npm install -D @tailwindcss/forms
  1. Add to require('@tailwindcss/forms') to Tailwind Configuration
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}

Examples

Sample Code Demo

import React from "react";
import { ReuseInput } from "@locoworks/reusejs-react-input";

const SampleInput = () => {
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseInput className="focus:border-red-600 focus:ring-red-600 " />
		</div>
	);
};

export default SampleInput;

Disabled Input

import React from "react";
import { ReuseInput } from "@locoworks/reusejs-react-input";

const DisabledInput = () => {
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseInput
				disabled={true}
				placeholder="Disabled"
				className="bg-gray-200"
			/>
		</div>
	);
};

export default DisabledInput;

Password Input

import React from "react";
import { ReuseInput } from "@locoworks/reusejs-react-input";

const PasswordInput = () => {
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseInput type="password" placeholder="Password" />
		</div>
	);
};

export default PasswordInput;

Password Show/Hide Input

import React, { useState } from "react";
import { ReuseInput } from "@locoworks/reusejs-react-input";

const PasswordShowHide = () => {
	const [showPassword, setShowPassword] = useState(false);

	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseInput
				className="w-[300px]"
				type="password"
				placeholder="Password"
				showPassword={showPassword}
			/>
			<button
				className="w-20 bg-blue-400 mt-2 text-white font-bold py-2 rounded "
				onClick={() => setShowPassword(!showPassword)}
			>
				{showPassword ? "Hide" : "Show"}
			</button>
		</div>
	);
};

export default PasswordShowHide;

Number Input

import { ReuseInput } from "@locoworks/reusejs-react-input";
import React from "react";

const NumberInput = () => {
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseInput type="number" className="" />
		</div>
	);
};

export default NumberInput;

AcceptedInput

import React from "react";
import { ReuseInput } from "@locoworks/reusejs-react-input";

const AcceptedInput = () => {
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseInput
				type="text"
				className="bg-green-200 focus:ring-green-300  focus:border-green-300 ring ring-blue-400"
				placeholder="Enter Email"
			/>
		</div>
	);
};

export default AcceptedInput;

RejectedInput

import React from "react";
import { ReuseInput } from "@locoworks/reusejs-react-input";

const RejectedInput = () => {
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseInput
				type="text"
				className="bg-red-200  ring ring-inset focus:ring-red-300  focus:border-red-300 ring-red-400"
				placeholder="Enter Email"
			/>
		</div>
	);
};

export default RejectedInput;

SizeInput

import React from "react";
import { ReuseInput } from "@locoworks/reusejs-react-input";

const SizeInput = () => {
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseInput
				type="text"
				className="text-xl  px-4 py-3"
				placeholder="Big Email Input"
			/>
			<ReuseInput
				type="text"
				className="text-base px-3 py-2"
				placeholder="Medium Email Input"
			/>
			<ReuseInput
				type="text"
				className="text-sm px-3 py-1"
				placeholder="Small Email Input"
			/>
		</div>
	);
};

export default SizeInput;

ColorInput

import React from "react";
import { ReuseInput } from "@locoworks/reusejs-react-input";

const AcceptedInput = () => {
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseInput
				type="text"
				className="border-blue-300 focus:ring-blue-300  focus:border-blue-300 ring ring-blue-300 text-blue-600"
				placeholder="Enter Email"
			/>
			<ReuseInput
				type="text"
				className="border-green-300 focus:ring-green-300  focus:border-green-300 ring ring-green-300 text-green-600"
				placeholder="Enter Email"
			/>
			<ReuseInput
				type="text"
				className="border-yellow-300 focus:ring-yellow-300  focus:border-yellow-300 ring ring-yellow-300 text-yellow-600"
				placeholder="Enter Email"
			/>
		</div>
	);
};

export default AcceptedInput;

ForwardRefInput

import React, { useEffect, useRef } from "react";
import { ReuseInput } from "@locoworks/reusejs-react-input";
import { HeadlessButton } from "@locoworks/reusejs-react-button";
const Forwardrefinput = () => {
	const sampleref = useRef<HTMLInputElement>(null);

	useEffect(() => {
		if (sampleref.current) {
			sampleref.current.focus();
		}
	}, []);
	const handleClick = () => {
		// Access the input value using the ref
		if (sampleref.current) {
			const a = sampleref.current.value;
			alert(`${a} is the value of input `);
		}
	};
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseInput inputRef={sampleref} placeholder="start typing." />
			<HeadlessButton
				className="bg-blue-200 border border-blue-400 rounded px-3 py-1"
				onClick={handleClick}
			>
				Get Value
			</HeadlessButton>
		</div>
	);
};

export default Forwardrefinput;