❤
npm
Sign UpSign In

react-scrollspy-animate

0.1.3 • Public • Published

https://github.com/Artrogeno/react-scrollspy-animate

Scrollspy Animate Component Demo

Install

$ yarn add react-scrollspy-animate

Usage

import Scrollspy from 'react-scrollspy-animate'
 
...

Properties

Scrollspy.propTypes = {
  tag: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  componentClass: PropTypes.string,
  scrolledPastClassName: PropTypes.string,
  active: PropTypes.string,
  level: PropTypes.number,
  offset: PropTypes.number,
  timeout: PropTypes.number,
  rootEl: PropTypes.string,
  animete: PropTypes.object,
  onUpdate: PropTypes.func
}

Exemple

Default

<body>
  <Scrollspy>
    <li>
      <a href="#section-1">Section 1</a>
    </li>
    <li>
      <a href="#section-2">Section 2</a>
    </li>
    <li>
      <a href="#section-3">Section 3</a>
    </li>
  </Scrollspy>
 
  <div id="section-1"></div>
  <div id="section-2"></div>
  <div id="section-3"></div>
</body>

Level 1 ( tag --> a )

<Scrollspy level={1} >
  <a href="#section-1">Section 1</a>
  <a href="#section-2">Section 2</a>
  <a href="#section-3">Section 3</a>
</Scrollspy>

Level 2 ... ( tag --> li > a )

<Scrollspy level={2} >
  <li>
    <a href="#section-1">Section 1</a>
  </li>
  <li>
    <a href="#section-2">Section 2</a>
  </li>
  <li>
    <a href="#section-3">Section 3</a>
  </li>
</Scrollspy>

Active ( default ==> class="active" )

<Scrollspy active="nav-active" >
  <li>
    <a href="#section-1">Section 1</a>
  </li>
  <li class="nav-active"> <!--- Scroll Activite ---->
    <a href="#section-2">Section 2</a>
  </li>
  <li>
    <a href="#section-3">Section 3</a>
  </li>
</Scrollspy>

Animate & Timeout from Mozilla (scrollIntoView)

Mozilla

// --> Animete
// <Scrollspy animate={ behavior: 'smooth', block: 'start' } >
{
  behavior: "auto"  | "instant" | "smooth",
  block:    "start" | "end",
}

// --> Set hash your browser in 500 milliseconds
// <Scrollspy timeout={500} >
setTimeout(() => {
  window.location.hash = '#section-2'
}, timeout);

Readme

Keywords

none

Package Sidebar

Install

npm i react-scrollspy-animate

Repository

github.com/Artrogeno/react-scrollspy-animate

Homepage

github.com/Artrogeno/react-scrollspy-animate#readme

Weekly Downloads

0

Version

0.1.3

License

none

Unpacked Size

4.91 kB

Total Files

3

Last publish

Collaborators

  • artrogeno
Try on RunKit
Report malware