bik-inputs v1.27.5

bik-inputs

A reusable, customizable, and accessible input component library for React applications. Supports multiple input types with various customizations.

📦 Installation

npm install bik-inputs

or

yarn add bik-inputs

Dependencies

clsx Tailwind CSS input-otp react-datepicker dayjs

📌 Note:

This library utilizes Tailwind CSS for styling. The colors displayed in the input fields can be customized by modifying the primary and secondary colors in your Tailwind configuration file. To ensure proper styling, make sure to define primary and secondary-700 in your Tailwind theme settings.

🚀 Usage

Basic Example

import React from "react";
import { AnimatedInputField } from "bik-inputs";

const App = () => {
  const [formData, setFormData] = useState<Record<string, string>>({});
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };
  return (
    <AnimatedInputField
      label="Username"
      name="username"
      formData={formData}
      onChange={handleChange}
    />
  );
};

export default App;

🎨 Available Input Fields

<PhoneInputField placeholder="Enter your phone number" />
<AnimatedInputField placeholder="Animated Input" />
<CalculationInputField placeholder="Calculation Input" />
<EmailInputField placeholder="Enter your email" />
<AnimatedTextArea placeholder="Animated Text Area" />
<ValidationInputField placeholder="Validation Input" />
<UserSearchField placeholder="Search User" />
<OTPInputField value="" handleOnChange={handleOnChange} />
<DateInputField />

📋 Props & Customization

Each component has its own set of props for customization. Check the documentation for details on each input field's specific properties.

Common Props

🛠 Customization & Styling

You can override styles using the className prop.

<AnimatedInputField className="custom-input" />

🔗 More Details

For more details, visit the GitHub repository.

🔗 Development

How to Contribute

🔗 License

This project is licensed under the MIT License.

👨‍💻 Author

Created by bikiran.com. Feel free to contribute!