Skip to content

Latest commit

 

History

History
139 lines (103 loc) · 4.78 KB

README.md

File metadata and controls

139 lines (103 loc) · 4.78 KB
Raw

EaseAnchor

中文文档

EaseAnchor is a flexible React anchor navigation component that provides easy-to-use in-page navigation functionality. It supports multi-level nested anchor structures, customizable scroll containers and styles, and offers both smooth scrolling and instant jump modes. (Currently in beta version)

Features

  • Supports multi-level nested anchor structures
  • Customizable scroll container
  • Supports smooth scrolling and instant jumping
  • Automatically detects and highlights currently visible anchors
  • Customizable styles and class names for anchor items
  • Supports setting initial active anchor via URL hash or default value
  • Provides a global click callback function

demo

Installation

npm install ease-anchor

Usage

import React from 'react';
import EaseAnchor from 'ease-anchor';

const App = () => {
  const items = [
    { href: 'section1', content: 'Section 1' },
    { href: 'section2', content: 'Section 2' },
    {
      href: 'section3',
      content: 'Section 3',
      children: [
        { href: 'section3-1', content: 'Section 3.1' },
        { href: 'section3-2', content: 'Section 3.2' },
      ],
    },
  ];

  return (
    <div>
      <EaseAnchor items={items} offset={60} />
      <div id="section1">Section 1 content</div>
      <div id="section2">Section 2 content</div>
      <div id="section3">
        Section 3 content
        <div id="section3-1">Section 3.1 content</div>
        <div id="section3-2">Section 3.2 content</div>
      </div>
    </div>
  );
};

export default App;

More usage examples

API

EaseAnchor Props

Property Type Default Description
items AnchorItem[] - Array of anchor items defining the structure
scrollContainer string | HTMLElement window ID or HTMLElement of the scroll container
offset number 0 Scroll offset
animation boolean true Whether to use smooth scrolling
onClick (href: string, hierarchy: string[]) => void - Callback function when an anchor is clicked
className string '' Custom class name for the navigation container
style CSSProperties {} Custom style for the navigation container
itemClassName string '' Custom class name for anchor items
itemStyle CSSProperties {} Custom style for anchor items
defaultValue string - Default active anchor href

AnchorItem

The AnchorItem interface defines the structure of each anchor item:

Property Type Description
href string Target ID of the anchor
content ReactNode | ((isActive: boolean, level: number) => ReactNode) Display content of the anchor
children AnchorItem[] Optional, child anchor items

Basic Usage

Custom Scroll Container

You can specify a custom scroll container using the scrollContainer prop:

<EaseAnchor items={items} scrollContainer="custom-container" />

Dynamic Content

You can use a function to dynamically generate anchor content:

const items = [
  {
    href: 'dynamic',
    content: (isActive, level) => (
      <span style={{ color: isActive ? 'red' : 'black' }}>Dynamic Content (Level: {level})</span>
    ),
  },
];

Using Callback Function

You can use the onClick callback to perform custom actions:

const handleClick = (href, hierarchy) => {
  console.log(`Clicked: ${href}, Hierarchy: ${hierarchy.join(' > ')}`);
};

<EaseAnchor items={items} onClick={handleClick} />;

License

EaseAnchor is licensed under the MIT License. See the LICENSE file for more information.

Contact Us

If you have any questions or suggestions, please contact us through:

Thank you for using EaseAnchor!