export const Component: FC = ({ children, variant = 'primary', disabled = false, onClick, }) => { return ( <div className={component component--${variant}} data-disabled={disabled} onClick={disabled ? undefined : onClick} > {children} ); };


### Typing Guidelines

| Pattern | Use |
|---------|-----|
| `FC<Props>` | Standard functional components |
| `ReactNode` | Children, any renderable content |
| `ComponentPropsWithoutRef<'button'>` | Extend native HTML element props |
| `forwardRef<HTMLDivElement, Props>` | Components needing ref forwarding |

### Event Handler Types

```tsx
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;

Custom Hooks Pattern

import { useState, useCallback } from 'react';

interface UseToggleReturn {
  value: boolean;
  toggle: () => void;
  setTrue: () => void;
  setFalse: () => void;
}

export const useToggle = (initialValue = false): UseToggleReturn => {
  const [value, setValue] = useState(initialValue);
  
  const toggle = useCallback(() => setValue(v => !v), []);
  const setTrue = useCallback(() => setValue(true), []);
  const setFalse = useCallback(() => setValue(false), []);
  
  return { value, toggle, setTrue, setFalse };
};

Context Pattern

import { createContext, useContext, type FC, type ReactNode } from 'react';

interface ThemeContextValue {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextValue | null>(null);

export const useTheme = (): ThemeContextValue => {
  const context = useContext(ThemeContext);
  if (!context) throw new Error('useTheme must be used within ThemeProvider');
  return context;
};

File Naming

ComponentName/
├── ComponentName.tsx          # Implementation
├── ComponentName.types.ts     # Types (optional)
├── ComponentName.stories.tsx  # Storybook
├── index.ts                   # Exports

Best Practices

Explicit return types for public functions
Discriminated unions for complex state
as const for literal types
Generic components for reusable patterns
Handle undefined explicitly

Integration

Atomic Design: See atomic-design skill for hierarchy
CSS Tokens: See css-tokens skill for styling
Storybook: See storybook skill for docs

react-typescript

React TypeScript Development

Core Patterns

Component Structure