Anchor

Hyperlinks to scroll on one page.

When to use

For displaying anchor hyperlinks on page and jumping between them.

Notes for developers

After version 4.24.0, Anchor was rewritten as a function component. Methods that obtain a ref and call internal instance methods are invalid.

Examples

Basic

The simplest usage.

Horizontal Anchor

Horizontally aligned anchors

Static Anchor

Do not change state when page is scrolling.

Customize the onClick event

Clicking on an anchor does not record history.

Customize the anchor highlight

Customize the anchor highlight.

Set Anchor scroll offset

Anchor target scroll to screen center.

Listening for anchor link change

Listening for anchor link change.

Replace href in history

Replace path in browser history, so back button returns to previous page instead of previous anchor item.

Custom semantic dom styling

You can customize the semantic dom style of Anchor by passing objects/functions through classNames and styles.

API

Anchor, Anchor.Link, and their props are exported from @ceebee/ui/client.

Anchor Props

Property	Description	Type	Default	Version
`affix`	Fixed mode of Anchor	`boolean \| Omit<AffixProps, 'offsetTop' \| 'target' \| 'children'>`	`true`	object: 5.19.0
`bounds`	Bounding distance of anchor area	`number`	`5`	—
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`getContainer`	Scrolling container	`() => HTMLElement`	`() => window`	—
`getCurrentAnchor`	Customize the anchor highlight	`(activeLink: string) => string`	`-`	—
`offsetTop`	Pixels to offset from top when calculating position of scroll	`number`	`0`	—
`showInkInFixed`	Whether show ink-square when affix={false}	`boolean`	`false`	—
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`targetOffset`	Anchor scroll offset, default as offsetTop, example	`number`	`-`	—
`onChange`	Listening for anchor link change	`(currentActiveLink: string) => void`	`—`	—
`onClick`	Set the handler to handle click event	`(e: MouseEvent, link: object) => void`	`-`	—
`items`	Data configuration option content, support nesting through children	`{ key, href, title, target, children }\[] see`	`-`	5.1.0
`direction`	Set Anchor direction	`vertical \| horizontal`	`vertical`	5.2.0
`replace`	Replace items' href in browser history instead of pushing it	`boolean`	`false`	5.7.0

AnchorItem

Property	Description	Type	Default	Version
`key`	The unique identifier of the Anchor Link	`string \| number`	`-`	—
`href`	The target of hyperlink	`string`	`—`	—
`target`	Specifies where to display the linked URL	`string`	`—`	—
`title`	The content of hyperlink	`ReactNode`	`—`	—
`children`	Nested Anchor Link, Attention: This attribute does not support horizontal orientation	`AnchorItem\[]`	`-`	—
`replace`	Replace item href in browser history instead of pushing it	`boolean`	`false`	5.7.0
`targetOffset`	Customize scroll offset for this anchor link. It takes precedence over the targetOffset prop of the Anchor component	`number`	`-`	6.4.0

Link Props

Property	Description	Type	Default	Version
`href`	The target of hyperlink	`string`	`—`	—
`target`	Specifies where to display the linked URL	`string`	`—`	—
`title`	The content of hyperlink	`ReactNode`	`—`	—
`targetOffset`	Customize scroll offset for this anchor link. It takes precedence over the targetOffset prop of the Anchor component	`number`	`-`	6.4.0