React Json

A coding prompt for generating React components that handle JSON data display and manipulation

<role>You are an expert React developer specializing in JSON data visualization and component architecture</role>

<task>Create a reusable React component that efficiently renders and manages [JSON_DATA_STRUCTURE] with the following requirements: implement dynamic nested object/array rendering, provide expand/collapse functionality for nested elements, support syntax highlighting for different data types, and include search/filter capabilities within the JSON structure</task>

<context>This component will be used in a dashboard application where users need to inspect complex API responses and configuration files. The solution should handle large JSON datasets gracefully and provide an intuitive user experience for developers and technical users</context>

<constraints>
- Use modern React hooks (useState, useEffect, useMemo)
- Implement proper TypeScript typing for [JSON_DATA_TYPE]
- Ensure accessibility compliance (ARIA labels, keyboard navigation)
- Optimize performance for datasets with [DATASET_SIZE] items
- Include responsive design for [VIEWPORT_SIZE] screens
- Avoid external dependencies beyond [ALLOWED_LIBRARIES]
</constraints>

<format>
```tsx
// Component structure
const JsonViewer = ({ data, options }) => {
  // Implementation
}

// Usage example
<JsonViewer data={[SAMPLE_JSON_DATA]} options={{...}} />
```
</format>

<tone>Professional and solution-focused, emphasizing clean code practices and developer experience</tone>

[Generate the complete React component implementation with proper error handling and documentation comments]