tessl/npm-types--react
tessl install tessl/npm-types--react@19.1.0TypeScript definitions for React, the popular JavaScript library for building user interfaces
Agent Success
Agent success rate when using this tile
80%
Improvement
Agent success rate improvement when using this tile compared to baseline
1.48x
Baseline
Agent success rate without this tile
54%
task.mdevals/scenario-10/
Theme Switcher
A simple theme management system that allows users to toggle between light and dark themes across an application.
Capabilities
Theme State Management
- The default theme is "light" when no theme is explicitly set @test
- ThemeDisplay component shows "Current theme: light" by default @test
Theme Switching
- When the toggle button is clicked, the theme switches from "light" to "dark" @test
- When the toggle button is clicked twice, the theme returns to "light" @test
Context Consumption
- ThemeDisplay component correctly displays the current theme after it changes @test
Implementation
@generates
API
/**
* Theme type representing available themes
*/
export type Theme = "light" | "dark";
/**
* Context value shape containing theme and toggle function
*/
export interface ThemeContextValue {
theme: Theme;
toggleTheme: () => void;
}
/**
* Props for ThemeProvider component
*/
export interface ThemeProviderProps {
children: React.ReactNode;
}
/**
* Provider component that manages theme state and provides it to children
*/
export function ThemeProvider(props: ThemeProviderProps): React.JSX.Element;
/**
* Component that displays the current theme name
*/
export function ThemeDisplay(): React.JSX.Element;
/**
* Component that renders a button to toggle between themes
*/
export function ThemeToggleButton(): React.JSX.Element;Dependencies { .dependencies }
@types/react { .dependency }
Provides TypeScript type definitions for React, including hooks and context APIs.
