react-sticky-scrollspy-nav

KO | EN

gitlite — search

#javascript #ai #typescript #llm #machine-learning #rust #docker #macos #nodejs #awesome #awesome-list #vue #security #mcp

react-sticky-scrollspy-nav

(★ 9)

A sticky scrollspy navigation view using react hooks.

react-sticky-scrollspy-nav 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# :hand:react-sticky-scrollspy-nav

[![npm](https://img.shields.io/npm/v/react-sticky-scrollspy-nav.svg)](https://www.npmjs.com/package/react-sticky-scrollspy-nav)
[![npm](https://img.shields.io/npm/dt/react-sticky-scrollspy-nav.svg)](https://www.npmjs.com/package/react-sticky-scrollspy-nav)

`react-sticky-scrollspy-nav` is a simple react component that provides smooth scrolling navigation with sections to a web page.

## How to install

Install via NPM package manager

```
npm i react-sticky-scrollspy-nav
```

Install via Yarn package manager

```
yarn add react-sticky-scrollspy-nav
```

## How to use it

1. Add \<section> tags to `StickyScrollSpyNav` component. You need to add `ref={createRef()}` to each section item.

```jsx
import StickyScrollSpyNav from "react-sticky-scrollspy-nav";
```

```jsx
<StickyScrollSpyNav>
  <section ref={React.createRef()}>...</section>
  <section ref={React.createRef()}>...</section>
  <section ref={React.createRef()}>...</section>
</StickyScrollSpyNav>
```

2.  Add `nav` props to render nav component.

```jsx
<StickyScrollSpyNav nav={["Nav1", "Nav2", "Nav3"]}>...</StickyScrollSpyNav>
```

### Example Code

```jsx
<StickyScrollSpyNav
  header={
    <div>
      <h1>Header content</h1>
      <h1>Header content</h1>
      <h1>Header content</h1>
    </div>
  }
  nav={["Nav1", "Nav2", "Nav3"]}
  navActiveItemStyle={{ color: "red" }}
>
  <section ref={React.createRef()} style={{ height: "70vh", background: "orange" }}>
    Nav 1 Content
  </section>
  <section ref={React.createRef()} style={{ height: "70vh", background: "blue" }}>
    Nav 2 Content
  </section>
  <section ref={React.createRef()} style={{ height: "70vh", background: "green" }}>
    Nav 3 Content
  </section>
</StickyScrollSpyNav>
```

## Props

Common props you may want to specify include:

| Properties           | PropType    | Description                                                                                 |
| -------------------- | ----------- | ------------------------------------------------------------------------------------------- |
| `nav`                | `string[]`  | (**Required**) navigation names with button tag.                                            |
| `header`             | `component` | header component.                                                                           |
| `offset`             | `number`    | offset from top of page.                                                                    |
| `onClickNav`         | `function`  | handler which clicks navigation item scrolling and focusing section. (has 'index' argument) |
| `style`              | `object`    | customize root style.                                                                       |
| `navContainerStyle`  | `object`    | customize navigation container style.                                                       |
| `navItemStyle`       | `object`    | customize navigation item style.                                                            |
| `navActiveItemStyle` | `object`    | customize navigation item style when activated.                                             |

## License

react-sticky-scrollspy-nav

react-sticky-scrollspy-nav 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-sticky-scrollspy-nav

react-sticky-scrollspy-nav 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README