tessl/npm-types--react

TypeScript definitions for React, the popular JavaScript library for building user interfaces

1.48x

Overview

Eval results

Files

Theme Switcher

Name: tessl/npm-types--react
Rating: 0.8 (1 reviews)
Author: tessl

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.

Install with Tessl CLI

npx tessl i tessl/npm-types--react