Scrollspy about reactstrap HOT 8 CLOSED

Recently I migrated my bootstrap4 project to reactstrap but unfortunately it didn't support a scrollspy... So, I had no choice but created and published a small library to implement a scrollspy for reactstrap. It provides just a minimum feature but check out reactstrap-scrollspy if you're interested in.

from reactstrap.

1. possible: https://github.com/fisshy/react-scroll
2. possible: https://github.com/makotot/react-scrollspy

from reactstrap.

Hey, while investigating on how to implement Scrollspy I focused onto
https://github.com/camwiegert/in-view
and I found out that there already are a couple of implementations, i.e.:

• https://github.com/ssruoyan/react-in-view

the API for Scrollspy would be something like react-in-view does:

<Scrollspy
  onEnter={this.handleEnter}
  onLeave={this.handleLeave}
  threshold={{ x: 0, y: 0 }}
  offset={{ top: 0, right: 0, bottom: 0, left: 0 }}
>
  <div>Spied component</div>
</Scrollspy>

where callbacks would be used to update state (and set active Nav elements).

Would this be a suitable solution for you?

from reactstrap.

As a second option there are a couple of HoC, i.e.:

• https://github.com/roderickhsiao/react-in-viewport
• https://github.com/BausCode/react-inview

react-in-viewport relies on Intersection Observer API
the API would then be something like:

<Scrollspy
  onEnter={this.handleEnter}
  onLeave={this.handleLeave}
  options={{
    margin: "0 0 0 0",
    threshold: 10 // Percentage
  }}
  config={{ disconnectOnLeave: boolean }}
>
  <div>Spied component</div>
</Scrollspy>;

from reactstrap.

I saw this feature was removed from To Do. Is reactstrap going to support Scrollspy?

from reactstrap.

I know this is kinda a cop-out, but since scrollspy doesn't really do much other than add a the active class based on scrolling and there are libs out there which currently do that and do that very well, we haven't implemented it and instead just suggest the use of things like react-scrollspy.

You're probably like "there are tons of libraries which do things like dropdowns (react-select) and modals (react-modal) and reactstrap has those built-in", but they do not look like or work like bootstrap out-of-the-box. react-scrollspy does (given that you set currentClassName="active").

Maybe we could has react-scrollspy as a dep and expose it with currentClassName="active" as the default so that reactstrap includes the feature without really having to maintain it. Honestly though, I don't think that many people use it.

from reactstrap.

@keidrun awesome! If you'd like, submit a PR to add it to the In the wild section of the docs.

from reactstrap.

@TheSharpieOne Sure. I'd love to.

from reactstrap.