Production-Ready React Component Generator
Prompt
Generate a production-ready React component for a [data table with sorting, filtering, and pagination]. Requirements: 1. **TypeScript** with strict types and proper interfaces 2. **Props Interface**: clearly defined with JSDoc comments 3. **Accessibility**: ARIA labels, keyboard navigation, screen reader support 4. **Performance**: useMemo for expensive calculations, useCallback for handlers, virtualization for large datasets 5. **State Management**: useState/useReducer (no external libraries) 6. **Error Handling**: error boundaries, loading states, empty states 7. **Styling**: CSS modules or styled-components (specify in className pattern) 8. **Testing**: Jest + React Testing Library test file with 5+ test cases 9. **Storybook**: story file with multiple variants 10. **Documentation**: inline JSDoc + usage example Follow React best practices: composition over inheritance, single responsibility, DRY principle. Include all imports.
946 characters
How to Use
- 1
Replace [component type] with what you need
- 2
Paste into ChatGPT
- 3
Copy the main component, test file, and story file separately
- 4
Install any peer dependencies mentioned
- 5
Customize the styling approach to match your project
Expected Output
A complete, production-ready React component with TypeScript, tests, Storybook story, and comprehensive documentation.