0
# React LinkTo Component
1

2
React component providing native link behavior for story navigation while preventing page reloads. Ideal for creating story navigation within React applications.
3

4
## Capabilities
5

6
### LinkTo Component
7

8
React component that renders as an anchor element with proper href and click handling for story navigation.
9

10
```typescript { .api }
11
/**
12
 * React component for story navigation links
13
 * Renders as anchor element with story URL and click handling
14
 */
15
class LinkTo extends React.PureComponent<Props, State>;
16

17
interface Props {
18
  /** Story kind (legacy, use title instead) */
19
  kind?: StoryKind;
20
  /** Story component title */
21
  title?: ComponentTitle;
22
  /** Story name (legacy, use name instead) */
23
  story?: StoryName;
24
  /** Story name */
25
  name?: StoryName;
26
  /** Link content (text, elements, etc.) */
27
  children: ReactNode;
28
}
29

30
interface State {
31
  href: string;
32
}
33
```
34

35
**Usage Examples:**
36

37
```typescript
38
import LinkTo from "@storybook/addon-links/react";
39

40
// Basic story link
41
<LinkTo title="Example" name="Button">
42
  View Button Story
43
</LinkTo>
44

45
// Link with custom styling
46
<LinkTo 
47
  title="Components/Form" 
48
  name="LoginForm"
49
  className="story-link"
50
  style={{ color: 'blue' }}
51
>
52
  Go to Login Form
53
</LinkTo>
54

55
// Using legacy props (still supported)
56
<LinkTo kind="Example" story="Button">
57
  Button Example
58
</LinkTo>
59
```
60

61
### Component Behavior
62

63
The LinkTo component automatically:
64

65
- **Generates proper URLs**: Uses `hrefTo` to create valid story URLs for the href attribute
66
- **Prevents page reloads**: Intercepts clicks and uses internal navigation instead of browser navigation
67
- **Updates on prop changes**: Automatically updates the href when title/name props change
68
- **Handles click modifiers**: Respects Cmd/Ctrl/Shift/Alt + Click for normal browser behavior
69
- **Passes through props**: All additional props are passed to the underlying anchor element
70

71
### Click Handling
72

73
The component distinguishes between different types of clicks:
74

75
**Click behavior:**
76
- **Plain left click**: Triggers internal story navigation 
77
- **Cmd/Ctrl + Click**: Opens story in new tab (browser default)
78
- **Right click**: Shows context menu (browser default)
79
- **Middle click**: Opens in new tab (browser default)
80
- **Shift + Click**: Opens in new window (browser default)
81

82
### Lifecycle Methods
83

84
```typescript { .api }
85
class LinkTo extends React.PureComponent<Props, State> {
86
  /** Called after component mounts to initialize href */
87
  componentDidMount(): void;
88
  
89
  /** Called after props update to refresh href if needed */
90
  componentDidUpdate(prevProps: Props): void;
91
  
92
  /** Updates href state based on current props */
93
  updateHref(): Promise<void>;
94
  
95
  /** Handles click events for story navigation */
96
  handleClick(): void;
97
}
98
```
99

100
### Props Compatibility
101

102
The component supports both current and legacy prop naming:
103

104
| Current | Legacy | Description |
105
|---------|--------|-------------|
106
| `title` | `kind` | Story component title/kind |
107
| `name` | `story` | Individual story name |
108
109
**Note**: `title` and `name` are the preferred prop names. `kind` and `story` are maintained for backward compatibility.