laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
70 lines (47 loc) • 2.06 kB
Markdown
Theme toggle with three options: system, light, dark. Uses a controlled/uncontrolled API and avoids hydration mismatch by rendering only after mount.
---
| Prop | Type | Default | Description |
| -------------- | ---------------------------------- | --------- | ----------- |
| `value` | `"light" | "dark" | "system"` | `undefined` | Controlled theme value. |
| `onChange` | `(theme: "light" | "dark" | "system") => void` | `undefined` | Called when theme changes. |
| `defaultValue` | `"light" | "dark" | "system"` | `"system"` | Initial value when uncontrolled. |
| `className` | `string` | `undefined` | Container classes. |
---
- **SSR safe**: Renders `null` until mounted to prevent hydration mismatch.
- **Active state**: Highlights the active option with a rounded background.
- **Control**: Works in both controlled (`value`/`onChange`) and uncontrolled (`defaultValue`) modes.
---
## Examples
### Default (uncontrolled)
```tsx
import { ThemeSwitcher } from "laif-ds";
export function DefaultTheme() {
return <ThemeSwitcher defaultValue="system" />;
}
```
```tsx
import * as React from "react";
import { ThemeSwitcher } from "laif-ds";
export function ControlledTheme() {
const [theme, setTheme] = React.useState<"light" | "dark" | "system">("system");
return (
<div className="flex flex-col items-start gap-2">
<ThemeSwitcher value={theme} onChange={setTheme} />
<div className="text-d-muted-foreground text-sm">Current theme: <span className="font-medium">{theme}</span></div>
</div>
);
}
```
```tsx
<ThemeSwitcher defaultValue="system" className="h-10 w-32 p-2" />
```
---
- **Icons**: The component renders icons internally; no configuration required.
- **Persistence**: Persisting theme choice is up to the app (e.g., localStorage + class on `html`).