Needlessly Provoking Marsupials

    react-side-nav-list

    1.0.1 • Public • Published

    react-side-nav-list

    A react side navlist similar to Bilibili's sidenav img 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

    Install

    npm i react-side-nav-list

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    1.3 MB

    Total Files

    11

    Last publish

    Collaborators

    • aaabdsfdfdsfdsfdsf