Inputy - React Input Component with Smart Formatting

🎯 A powerful, lightweight React input component with built-in formatters for various input types. Perfect for forms, payment fields, and user data collection. Supports TypeScript, Next.js, and modern React frameworks.

Quick Start • Examples • Features • API Documentation • Support

---

Why Choose Inputy?

• 🚀 Zero Dependencies - Lightweight and fast
• 💪 TypeScript Ready - Full type safety and IntelliSense support
• 🎨 Framework Agnostic - Works with Next.js, Create React App, Vite, and more
• 📱 Mobile Friendly - Responsive and touch-optimized
• 🌙 Dark Mode Support - Automatic dark theme detection
• ♿ Accessibility First - WCAG compliant with ARIA support

🚀 Installation

Choose your preferred package manager:

# Using npm
npm install inputy

# Using yarn
yarn add inputy

# Using pnpm
pnpm add inputy

💻 Framework Compatibility

Modern React Frameworks

• ⚛️ React 16.8+ with Hooks
• 📱 Next.js 12, 13, 14 (Pages & App Router)
• ⚡ Vite
• 🎯 Create React App (CRA)
• 💨 Remix
• 🌟 Gatsby
• 🔥 React + TypeScript Projects

Build System Support

• 📦 Webpack 4/5
• 🔄 Rollup
• 🏗️ esbuild
• 🎯 Parcel 2

CSS Framework Integration

• 🎨 CSS Modules
• 💅 Styled Components
• 🎯 Tailwind CSS
• 🔥 Emotion
• 📝 SASS/SCSS

📋 Key Features

• ✨ Smart Input Formatting

  • Automatic card number spacing
  • Phone number formatting
  • Date formatting (MM/YY, DD/MM/YYYY)
  • PAN & Aadhar card formatting

• 🎨 Advanced Styling

  • Custom CSS classes
  • Theme customization
  • Dark mode support
  • Responsive design

• 🔒 Developer Experience

  • TypeScript support
  • React Hook Form compatible
  • Formik integration
  • Redux Form support

• ♿ Accessibility

  • ARIA labels
  • Keyboard navigation
  • Screen reader friendly
  • WCAG 2.1 compliant

View all features

💻 Quick Start Examples

Basic React Input

import { Inputy } from "inputy";
import "inputy/dist/styles.css";

function App() {
  return (
    <Inputy
      type="phone"
      label="Phone Number"
      required
      onValueChange={(value) => console.log(value)}
    />
  );
}

Next.js Integration

// pages/_app.js or app/layout.js
import "inputy/dist/styles.css";

// Your component
import { Inputy } from "inputy";

export default function PaymentForm() {
  return (
    <Inputy
      type="debitCard"
      label="Card Number"
      required
      errorMessage="Invalid card number"
    />
  );
}

View more examples

📚 Input Types & Validation

Supported Input Types

Type	Use Case	Format
debitCard	Payment Forms	1234 5678 9012 3456
phone	Contact Forms	1234567890
email	User Registration	user@example.com
pan	Tax Forms	ABCDE1234F
aadhar	ID Verification	1234 5678 9012
View all types

🎨 Styling Guide

Default Theme Customization

.inputy-form-control {
  border-radius: 8px;
  border-color: #6366f1;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .inputy-form-control {
    background-color: #1f2937;
    color: #fff;
  }
}

View styling documentation

🧪 Testing Support

Compatible with popular testing frameworks:

• ✅ Jest
• 🧪 React Testing Library
• 🎯 Cypress
• ⚡ Vitest

🔧 Browser Support

• ✅ Chrome (Latest)
• ✅ Firefox (Latest)
• ✅ Safari (Latest)
• ✅ Edge (Latest)
• ✅ Mobile Browsers

🤝 Contributing

We welcome contributions! See our Contributing Guide for details.

📜 License

MIT © Nk Alam

---

Made with ❤️ by Nk Alam

GitHub • npm • Issues

Keywords: react-input, form-component, input-formatter, react-forms, typescript-react, nextjs-component, react-ui