React LinkTo Component

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

Capabilities

LinkTo Component

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

/**
 * React component for story navigation links
 * Renders as anchor element with story URL and click handling
 */
class LinkTo extends React.PureComponent<Props, State>;

interface Props {
  /** Story kind (legacy, use title instead) */
  kind?: StoryKind;
  /** Story component title */
  title?: ComponentTitle;
  /** Story name (legacy, use name instead) */
  story?: StoryName;
  /** Story name */
  name?: StoryName;
  /** Link content (text, elements, etc.) */
  children: ReactNode;
}

interface State {
  href: string;
}

Usage Examples:

import LinkTo from "@storybook/addon-links/react";

// Basic story link
<LinkTo title="Example" name="Button">
  View Button Story
</LinkTo>

// Link with custom styling
<LinkTo 
  title="Components/Form" 
  name="LoginForm"
  className="story-link"
  style={{ color: 'blue' }}
>
  Go to Login Form
</LinkTo>

// Using legacy props (still supported)
<LinkTo kind="Example" story="Button">
  Button Example
</LinkTo>

Component Behavior

The LinkTo component automatically:

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

Click Handling

The component distinguishes between different types of clicks:

Click behavior:

• Plain left click: Triggers internal story navigation
• Cmd/Ctrl + Click: Opens story in new tab (browser default)
• Right click: Shows context menu (browser default)
• Middle click: Opens in new tab (browser default)
• Shift + Click: Opens in new window (browser default)

Lifecycle Methods

class LinkTo extends React.PureComponent<Props, State> {
  /** Called after component mounts to initialize href */
  componentDidMount(): void;
  
  /** Called after props update to refresh href if needed */
  componentDidUpdate(prevProps: Props): void;
  
  /** Updates href state based on current props */
  updateHref(): Promise<void>;
  
  /** Handles click events for story navigation */
  handleClick(): void;
}

Props Compatibility

The component supports both current and legacy prop naming:

Note: title and name are the preferred prop names. kind and story are maintained for backward compatibility.