Forms
Seamlessly integrate smart masking and robust validation into your react-hook-form inputs. Get clean, unmasked values with full TypeScript support, built to work perfectly with shadcn/ui.
Overview
If you're looking for a robust solution to streamline form handling in your React applications, the @omergulcicek/forms library presents a compelling option. This lightweight library focuses on type-safe masking and validation, making it a breeze to manage various input types while ensuring data integrity. Designed with React Hook Form users in mind, it not only simplifies the development process but enhances user experience through smart, real-time input handling.
The integration with shadcn/ui components means you won't have to compromise on aesthetics or usability, as this library ensures that your forms look great and function seamlessly. Whether you're dealing with numeric fields, pattern validations, or just want a simple way to handle user input, this library offers versatile tools to help you build efficient forms in a few easy steps.
Features
- Keyboard Input Validation: Restricts numeric fields to accept only numbers, reducing error entries.
- Smart Masking: Automatically formats commonly used input types like phone numbers and credit card numbers for a smoother user experience.
- Pattern Validation: Utilizes regex for built-in validation, ensuring data adheres to specified patterns.
- Value Access: Easily access both masked and unmasked values from each field object for handling in your application logic.
- TypeScript Support: Provides full type safety, making development more predictable and reducing errors.
- shadcn/ui Compatible: Works effortlessly with shadcn/ui components, ensuring integrated design and functionality.
- Automatic Styling: Inherits the beautiful design system of shadcn, providing an attractive UI with minimal effort.
- Accessibility Features: Maintains compliance with shadcn's accessibility guidelines for a more inclusive application.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Shadcn UI
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- React Hook Form
React Hook Form is a performant, flexible, and extensible form library for React with easy validation. It reduces re-renders and improves performance by using uncontrolled components and native HTML validation, making form handling simple and efficient.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.