inputy

v1.0.5

Published

10 months ago

A versatile React input component with built-in formatters for common input types

Downloads

0High
0Medium
0Low

nk_alam

react input Inputy form formatter validation

Inputy - 30+ React/Next 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 of Inputy

✨ Smart Input Formatting

🃏 Auto-formatting for 30+ input types
💳 Credit/Debit card number spacing
📱 Intelligent phone number formatting
📅 Dynamic date input parsing
🏷️ Specialized ID card formatting
🔍 Real-time input validation
🧹 Automatic input sanitization

🎨 Advanced Styling

🌈 7 Built-in theme variants
🌓 Dark/Light mode support
🖌️ Fully customizable CSS
🎲 Multiple color schemes
📱 Responsive design
🌟 Smooth animations
🔧 Flexible sizing options

🛡️ Input Type Mastery

💼 Financial inputs
🆔 Identification documents
📞 Communication fields
🌐 International format support
🔢 Numeric and text variants
📏 Strict input constraints
🚫 Error prevention

💻 Developer Experience

🔷 TypeScript first
🚀 Zero dependencies
🤝 Form library compatibility
🔌 Easy integration
📦 Lightweight implementation
🧪 Comprehensive type definitions
🔍 IntelliSense support

♿ Accessibility Excellence

🌐 WCAG 2.1 compliant
♿ Screen reader friendly
⌨️ Full keyboard navigation
🎨 High contrast support
📢 ARIA attribute integration
🌈 Color-blind considerations
📝 Semantic HTML structure

🔒 Advanced Features

🕒 Debounced value changes
🎭 State-based animations
🌍 Internationalization ready
🔄 Client-side rendering
📊 Performance optimized
🛠️ Extensive customization
🧠 Predictive input handling

💻 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

Payment & Financial Inputs

| Type | Description | Example Format | |------|-------------|----------------| | debitCard | Debit Card Number | 1234 5678 9012 3456 | | creditCard | Credit Card Number | 1234 5678 9012 3456 | | cvv | Card Verification Value | 123 | | expiryDate | Card Expiry Date | 12/25 | | currency | Monetary Values | 1,234.56 | | percentage | Percentage Values | 99.9% | | accountNumber | Bank Account Number | 1234 5678 9012 3456 | | creditScore | Credit Score | 750 |

Identification & Personal Inputs

| Type | Description | Example Format | |------|-------------|----------------| | pan | Permanent Account Number | ABCDE1234F | | aadhar | Indian Identification Number | 1234 5678 9012 | | passport | Passport Number | A1234567 | | voterId | Voter Identification | ABC1234567 | | drivingLicense | Driver's License | DL1234567890123 | | ssn | Social Security Number | 123-45-6789 | | username | Username | user_name123 |

Contact & Location Inputs

| Type | Description | Example Format | |------|-------------|----------------| | phone | Phone Number | 1234567890 | | email | Email Address | [email protected] | | url | Web Address | https://example.com | | ipAddress | IP Address | 192.168.1.1 | | coordinates | Geographical Coordinates | 12.9716,77.5946 |

Specialized Inputs

| Type | Description | Example Format | |------|-------------|----------------| | vehicleNumber | Vehicle Registration | AB 12 CD 3456 | | gst | Goods and Services Tax ID | 29ABCDE1234F1Z5 | | ifsc | Indian Financial System Code | SBIN0125620 | | upi | Unified Payments Interface | user@bank | | swiftCode | Bank Identifier Code | SBININBB123 | | hexColor | Hex Color Code | #FF5733 | | isbn | International Standard Book Number | 978-0-13-149505-0 | | vin | Vehicle Identification Number | 1HGCM82633A123456 | | stockSymbol | Stock Market Symbol | AAPL |

Date & Time Inputs

| Type | Description | Example Format | |------|-------------|----------------| | dob | Date of Birth | 25/12/1990 | | time | Time | 14:30 | | duration | Time Duration | 02:30:45 | | age | Age | 35 |

Measurement Inputs

| Type | Description | Example Format | |------|-------------|----------------| | weight | Weight | 75.5 | | height | Height | 175 cm | | temperature | Temperature | 37.5°C | | fileSize | File Size | 10.5 MB |

Other Inputs

| Type | Description | Example Format | |------|-------------|----------------| | text | Standard Text Input | Any text | | numeric | Numeric Input | 12345 | | password | Password Input | ******** | | pincode | Pin/Postal Code | 123456 |

Inputy Styling Guide 🎨

🌈 Theme Variants

Inputy offers multiple sophisticated theme options to suit any design aesthetic:

1. Classic Theme

.inputy-theme-classic {
  background: #ffffff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
}

Minimalist and clean
Soft border with light primary color
Subtle transitions

2. Modern Theme

.inputy-theme-modern {
  background: #f8fafc;
  border: 2px solid #93c5fd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

Contemporary design
Slightly elevated appearance
Soft shadow effect

3. Glass Theme

.inputy-theme-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

Translucent, modern look
Blur effect
Perfect for modern UI designs

4. Minimal Theme

.inputy-theme-minimal {
  background: transparent;
  border: none;
  border-bottom: 2px solid #bfdbfe;
}

Stripped-down design
Underline focus
Clean and elegant

5. Neumorphic Theme

.inputy-theme-neumorphic {
  background: #e0e5ec;
  border-radius: 15px;
  box-shadow: 
    8px 8px 15px rgba(163, 177, 198, 0.6),
    -8px -8px 15px rgba(255, 255, 255, 0.8);
}

Soft, raised design
Simulated depth
Modern skeuomorphic approach

6. Neon Theme

.inputy-theme-neon {
  background: #1a1a1a;
  border: 2px solid #60a5fa;
  color: #ffffff;
  box-shadow: 0 0 10px #60a5fa;
}

High-contrast design
Glowing border effect
Futuristic appearance

7. Retro Theme

.inputy-theme-retro {
  background: #fdf6e3;
  border: 3px solid #000000;
  box-shadow: 3px 3px 0 #000000;
}

Vintage-inspired design
Bold borders
Nostalgic feel

🎨 Color Variants

Inputy supports multiple color schemes for different states:

| Variant | Focus Border | Focus Shadow | |---------|--------------|--------------| | Primary | #3b82f6 | Soft blue highlight | | Success | #22c55e | Soft green highlight | | Error | #ef4444 | Soft red highlight | | Warning | #f59e0b | Soft orange highlight | | Info | #0ea5e9 | Soft cyan highlight |

📏 Size Variants

.inputy-size-sm { 
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
}

.inputy-size-md { 
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
}

.inputy-size-lg { 
  padding: 0.8rem 1rem;
  font-size: 1.125rem;
}

🎬 Animations

State Animations

Fade In
Slide Down
Bounce
Shake (for errors)
Pulse

Interaction Animations

Hover: Slight upward translation
Focus: Subtle elevation
Error: Shake animation
Success: Pulse effect

🌓 Dark Mode Support

Inputy automatically adjusts colors in dark mode:

Background shifts to darker tones
Border colors become softer
Maintains readability and contrast

💡 Customization Tips

Use CSS variables for easy theming
Leverage built-in animation classes
Combine theme and color variants
Respect dark mode preferences

Example Custom Theme

.my-custom-theme {
  --inputy-theme-classic-bg: custom-background-color;
  --inputy-theme-classic-border: custom-border-color;
}

🔧 Advanced Styling

Fully CSS variable driven
Zero-config theming
Highly extensible
Performance-optimized animations

🧪 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 to Inputy

Welcome, Developers! 👋

Inputy is an open-source project that thrives on community contributions. Whether you're a seasoned developer or a first-time contributor, there's a way for you to help make Inputy even better.

🌟 Why Contribute?

💡 Shape the future of form input components
🚀 Improve your coding skills
🤖 Learn advanced React development
🌍 Join a global community of developers
📈 Build your open-source portfolio

🛠 How to Contribute

1. Ways to Contribute

🐛 Bug Reports
- Identify and report issues
- Provide detailed reproduction steps
- Help improve component stability
✨ Feature Suggestions
- Propose new input types
- Suggest UI/UX improvements
- Recommend performance optimizations
🔧 Code Contributions
- Fix existing issues
- Implement new features
- Improve documentation
- Enhance test coverage
📖 Documentation
- Improve README
- Create usage examples
- Clarify existing documentation

2. Contribution Workflow

Setting Up

# Fork the repository
# Clone your forked repository
git clone https://github.com/nk-alam/Inputy.git

# Navigate to project directory
cd Inputy

# Install dependencies
npm install

# Create a new branch
git checkout -b feature/your-amazing-contribution

Development Guidelines

Follow existing code style
Write clean, readable code
Add tests for new features
Ensure all tests pass
Update documentation

Submission Process

# Stage your changes
git add .

# Commit with a clear message
git commit -m "feat: Add comprehensive phone number input formatting"

# Push to your fork
git push origin feature/your-amazing-contribution

3. Contribution Criteria

Code Quality Checklist

✅ Follows TypeScript best practices
✅ Passes all existing tests
✅ Maintains current performance standards
✅ Adds appropriate type definitions
✅ Includes comprehensive comments

Review Process

Open a Pull Request
Describe your changes in detail
Link any related issues
Wait for maintainer review
Address feedback promptly

🏆 Contribution Levels

🥉 Bronze Contributor

Opened first issue
Submitted first PR
Provided valuable feedback

🥈 Silver Contributor

Multiple accepted PRs
Consistent issue reporting
Active in discussions

🥇 Gold Contributor

Significant codebase improvements
Regular, high-quality contributions
Helps maintain and guide the project

📋 Code of Conduct

Be respectful and inclusive
Provide constructive feedback
Collaborate with kindness
Respect diverse perspectives
Focus on continuous improvement

💡 Best Practices

Communication
- Ask questions before major changes
- Discuss complex implementations
- Be open to suggestions
Technical
- Run linters before submitting
- Write meaningful commit messages
- Keep PRs focused and atomic

🚨 What to Avoid

❌ Massive, unfocused PRs
❌ Code without tests
❌ Ignoring existing design patterns
❌ Rude or dismissive communication

🌈 Special Thanks

Every contribution matters! Whether it's a tiny typo fix or a major feature, your effort helps improve Inputy for developers worldwide.

Happy Coding! 🚀👩‍💻👨‍💻