docs(abacus-react): update README with /static import path for RSC

- Document @soroban/abacus-react/static import path
- Add note about requiring /static for React Server Components
- Update code examples to use correct import path

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-11-03 18:50:48 -06:00
parent ed69f6b917
commit 72a4c2b80c
1 changed files with 7 additions and 2 deletions

View File

@ -127,7 +127,8 @@ import { AbacusReact, ABACUS_THEMES } from '@soroban/abacus-react';
For static, non-interactive displays that work in React Server Components:
```tsx
import { AbacusStatic } from '@soroban/abacus-react';
// IMPORTANT: Use /static import path for RSC compatibility!
import { AbacusStatic } from '@soroban/abacus-react/static';
// ✅ Works in React Server Components - no "use client" needed!
// ✅ No JavaScript sent to client
@ -141,6 +142,10 @@ import { AbacusStatic } from '@soroban/abacus-react';
/>
```
**Import paths:**
- `@soroban/abacus-react` - Full package (client components with hooks/animations)
- `@soroban/abacus-react/static` - Server-compatible components only (no client code)
**When to use `AbacusStatic` vs `AbacusReact`:**
| Feature | AbacusStatic | AbacusReact |
@ -157,7 +162,7 @@ import { AbacusStatic } from '@soroban/abacus-react';
```tsx
// Example: Server Component with static abacus cards
// app/flashcards/page.tsx
import { AbacusStatic } from '@soroban/abacus-react'
import { AbacusStatic } from '@soroban/abacus-react/static'
export default function FlashcardsPage() {
const numbers = [1, 5, 10, 25, 50, 100]