https://github.com/disrachik/custom-input
https://github.com/disrachik/custom-input
react storybook tailwindcss typescript
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/disrachik/custom-input
- Owner: DisRachik
- Created: 2024-09-09T20:36:39.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-14T11:39:31.000Z (9 months ago)
- Last Synced: 2024-12-27T16:22:50.474Z (5 months ago)
- Topics: react, storybook, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://disrachik.github.io/custom-input/?path=/docs/components-ua-inputgroup--docs
- Size: 928 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Custom Input Component
This repository contains a reusable input component for React projects with TypeScript and Tailwind CSS.
## Features
- Developed using **React**, **TypeScript**, and **Tailwind CSS**.
- Modular components: `InputText`, `InputLabel`, `InputGroup`, and `InputAnnotation`.
- Can be used individually (`InputText`) or in combination for full functionality (`InputGroup`, `InputLabel`, `InputAnnotation`).
- Supports light and dark themes.
- Includes validation error handling with `InputAnnotation`.
- Optimized for integration with **ReactHookForm** through the use of `forwardRef`.
## Usage Example
Here's an example of how to use the component:
```tsx
import { InputText, InputLabel, InputGroup, InputAnnotation } from './path-to-component';
const MyComponent = () => (
Label Text
Validation error message or help text
);
```
If you need to control the input using **ReactHookForm**, pass the `ref` attribute:
```tsx
```
### Benefits of Using `forwardRef`
Using `forwardRef` allows this component to work seamlessly with libraries like **ReactHookForm**, enabling easy form state management, validation, and access to the underlying DOM element.
## Storybook Documentation
Explore all component variants and documentation with **Storybook**:
[Component Overview](https://disrachik.github.io/custom-input/?path=/docs/components-ua-inputgroup--docs)
## Theme Support
This component supports both light and dark themes.
### Light Theme Example
### Dark Theme Example
In dark mode, the theme is controlled by Storybook, and you can switch between themes using the button shown below.
