Production-Ready React Component Generator

ChatGPT Coding & DevIntermediate5.4K copies
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. 1

    Replace [component type] with what you need

  2. 2

    Paste into ChatGPT

  3. 3

    Copy the main component, test file, and story file separately

  4. 4

    Install any peer dependencies mentioned

  5. 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.

Tags

Related Prompts