React Integration Test

This page demonstrates that Astro Islands React integration is working correctly with Sparkle UI components.

Interactive Button Demo

Simple React Component Test

Testing if a simple React component causes the sidebar layout issue:

This is a simple React component for testing layout issues.

Test React Interactivity

Implementation Details

Component Location: docs/src/components/demos/ButtonDemo.tsx

Astro Directive: client:load - Hydrates immediately on page load

Integration: React component using @sparkle/ui Button with interactive state

Features Demonstrated

• ✅ Astro Islands: React components render on the client side
• ✅ @sparkle/ui Integration: Sparkle Button components work within Astro
• ✅ Interactive State: React state management and event handling
• ✅ TypeScript Support: Full type safety for React components
• ✅ Styling Integration: Components render with proper styling

Technical Details

This integration enables:

1. Client-side Hydration: React components are hydrated on the client
2. Selective Interactivity: Only components marked with client:load are interactive
3. Optimal Performance: Static content remains static, interactive islands are hydrated as needed
4. Component Reusability: Sparkle components work seamlessly in both Astro and React contexts

Configuration

The React integration is configured in astro.config.mjs:

import react from '@astrojs/react'
import starlight from '@astrojs/starlight'

export default defineConfig({
  integrations: [
    react(),
    starlight({
      // Starlight configuration
    })
  ]
})

Component Usage

React components can be used in Astro with hydration directives:

// Import the React component
import { ButtonDemo } from './components/demos/ButtonDemo'

// Use with client-side hydration
<ButtonDemo client:load />