Skip to content
PromptLab by FEHMER TECH
ENDE
Coding

React Component Development

Create a professional, reusable React component with TypeScript.

Prompt template

Create a professional React component for [COMPONENT DESCRIPTION].

**Technical Requirements:**
- React version: [VERSION, e.g., 18+]
- TypeScript: Yes, with strict types
- Styling: [CSS Modules/Tailwind/Styled Components/etc.]
- State management: [useState/useReducer/Zustand/etc.]

**Component Specification:**
1. **Props Interface:** Fully typed props with optional and required fields
2. **Internal Logic:** Extract custom hooks where useful
3. **Error Handling:** Error boundaries and graceful degradation
4. **Accessibility:** ARIA attributes, keyboard navigation, screen reader support
5. **Performance:** React.memo, useMemo, useCallback where needed
6. **Responsive Design:** Mobile-first approach

**Deliver:**
- The main component with TypeScript
- Associated custom hooks
- Unit tests with React Testing Library
- Storybook story (optional)
- Usage example

**Behavior:** [DESCRIPTION OF DESIRED BEHAVIOR]

Replace placeholders in [square brackets]: [COMPONENT DESCRIPTION][VERSION, e.g., 18+][CSS Modules/Tailwind/Styled Components/etc.][useState/useReducer/Zustand/etc.][DESCRIPTION OF DESIRED BEHAVIOR]

How to use this template

Copy the prompt, replace the placeholders in square brackets with your details and paste it into the AI assistant of your choice. The more precise your details, the better the result.

Tips for better results

  • Describe the desired behavior and interactions in detail
  • Specify the styling framework and state management approach
  • Ask for Storybook stories for documentation
  • Request accessibility tests with jest-axe

Suitable open models

The selection names current open models as a starting point for your own tests. It is not a measurement for this template.

Keywords: #react #component #typescript #frontend

Last updated: