react-side-nav-list

A react side navlist similar to Bilibili's sidenav Cilck the content on side-nav will scroll the window to target element

Installation

NPM

npm install --save react-side-nav-list

Yarn

yarn add react-side-nav-list

Usage

The prop data is required and the format must be the list with object {id:string,content:string}, the id refers to the dom element's id,which helps the plugin to find target dom element,the content is the text word on nav list

import ReactSideNav from 'react-side-nav-list'
let dataList = [
  {
    id:'div1',
    content:'firstSection'
  },
  {
    id:'div2',
    content:'SecondSection'
  },
  {
    id:'div3',
    content:'ThirdSection'
  },
  {
    id:'div4',
    content:'FourthSection'
  },
]
<ReactSideNav data={dataList}/>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | position | string | 'right' | SideBar position on window('right','left') | | activeDistance | number | 100 | the distance to viewport top when the target dom element is active | | scrollTime | number | 1000 | scroll time to target dom element,milliseconds | | offset | number | 20 | offset of NavBar to left or right side of document | | customListItemStyle | object | {} | the custom style of nav-list,you can modify to your favourites's style |