inputy v1.0.5

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

Identification & Personal Inputs

Contact & Location Inputs

Specialized Inputs

Date & Time Inputs

Measurement Inputs

Other Inputs

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:

📏 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

1. Use CSS variables for easy theming
2. Leverage built-in animation classes
3. Combine theme and color variants
4. 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

1. Open a Pull Request
2. Describe your changes in detail
3. Link any related issues
4. Wait for maintainer review
5. 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

1. Be respectful and inclusive
2. Provide constructive feedback
3. Collaborate with kindness
4. Respect diverse perspectives
5. 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! 🚀👩‍💻👨‍💻

📜 License

MIT © Nk Alam