Build a Reusable React Component with TypeScript and Best Practices
Generate a fully typed, accessible, and tested React component with TypeScript, performance optimizations, and documentation.
📝 The Prompt
Create a production-ready React component called [COMPONENT_NAME] that serves the following purpose: [COMPONENT_PURPOSE].
Requirements:
1. **Technology Stack**: Use React 18+ with TypeScript. Use [STYLING_APPROACH] for styling (e.g., CSS Modules, Tailwind CSS, styled-components).
2. **Props Interface**: Define a comprehensive TypeScript interface for the component props. Include the following props at minimum:
- [PROP_1_NAME]: [PROP_1_TYPE] — [PROP_1_DESCRIPTION]
- [PROP_2_NAME]: [PROP_2_TYPE] — [PROP_2_DESCRIPTION]
- [PROP_3_NAME]: [PROP_3_TYPE] — [PROP_3_DESCRIPTION]
- Include an optional `className` prop for style overrides.
- Include an optional `children` prop if applicable.
3. **State Management**: Implement any necessary internal state using `useState` and `useReducer` where appropriate. If the component needs to fetch data, use [DATA_FETCHING_STRATEGY] (e.g., useEffect, React Query, SWR).
4. **Accessibility**: Ensure full WCAG 2.1 AA compliance. Include proper ARIA attributes, keyboard navigation support, and semantic HTML elements.
5. **Performance Optimization**: Apply `React.memo`, `useMemo`, and `useCallback` where they provide measurable benefit. Explain each optimization decision with a brief comment.
6. **Error Handling**: Implement proper error boundaries or error states within the component. Show a user-friendly fallback UI when errors occur.
7. **Testing**: Write at least 3 unit tests using React Testing Library and Jest that cover:
- Default rendering behavior
- User interaction (click, input, etc.)
- Edge cases (empty data, error states)
8. **Documentation**: Add JSDoc comments to the component and each prop. Include a usage example showing how to import and render the component with sample data.
Please organize the output into clearly labeled code blocks: component file, styles file, test file, and usage example.
💡 Tips for Better Results
Be as specific as possible when describing COMPONENT_PURPOSE — include the exact UI behavior, layout expectations, and user interactions you envision.
Specify your styling approach upfront to get consistent, copy-paste-ready code that matches your project's conventions.
List real prop names and types rather than leaving them generic to get a component that closely matches your actual use case.
🎯 Use Cases
Frontend developers building React applications who need a well-structured, production-quality component scaffold with built-in accessibility, testing, and TypeScript support.