Implement ScrollSpy about react-bootstrap HOT 13 CLOSED

I'd really rather not add this to R-B. It seems like you can roll something like this yourself w/e.g. react-waypoint and a top-level context thing.

It seems way to opinionated to make sense here. It's complicated, narrow, and isn't really an encapsulated component.

Are we okay with just not doing this?

from react-bootstrap.

Couple of additional thoughts,

The current Nav component already has the ability to select NavItem's based on a activeKey value, but will probably need some modifications to support nested Nav's and the basic nav style.

The target value might be safer to default it to document.body then allow DOM elements or React components to be passed through.

I like the idea of ScrollSpy component being split out from the Nav.

I wonder if the sections picked up by the ScrollSpy should be react components as well rather than just a div with an id, this would allow us to more easily setup a list of elements who's position should be checked on scroll. Something like:

<ScrollSpyNav>
  <NavItem key="btn">
    Buttons
    <Nav>
      <NavItem key="btn-groups">Button groups</NavItem>
      <NavItem key="btn-dropdowns">Button dropdowns</NavItem>
    </Nav>
  </NavItem>
  <NavItem key="panels">Panels</NavItem>
</ScrollSpyNav>

<ScrollSpySection key="btn">
  <h2>Buttons!</h2>
  <p>...</p>

  <ScrollSpySection key="btn-groups">
    <h3>Buttons!</h3>
    <p>...</p>
  </ScrollSpySection>
  <ScrollSpySection key="btn-dropdowns">
    <h3>Buttons!</h3>
    <p>...</p>
  </ScrollSpySection>
</ScrollSpySection>

<ScrollSpySection key="panels">
  <h2>Panels!</h2>
  <p>...</p>
</ScrollSpySection>

I would imagine the ScrollSpySection and ScrollSpyNav components in the previous example would register with a scroll watcher singleton that actually checks what section is active and scrolls to sections if requested, the singleton will save us from running the same calculations multiple times if multiple ScrollSpyNav's are used. It would be nice as well if the ScrollSpySection components could be notified if they are the active section, would be useful to know so you could activate animations or change styles based on this. This will probably require using a ScrollSpySectionMixin though to get access to the state.

from react-bootstrap.

The current Nav component already has the ability to select NavItem's based on a activeKey value, but will probably need some modifications to support nested Nav's and the basic nav style.

I've already implemented SubNav https://github.com/stevoland/react-bootstrap/blob/master/src/SubNav.jsx which takes care of nested navs and used it for the right-hand menu in the docs component page. Some work needs to be done to accept Buttons in the nav like in the bootstrap docs.

Interesting ideas there, I've got lots to think about. Think I'll stick to doing Carousel first!

from react-bootstrap.

Nice i didn't see that, very cool.

Yeah probably a good idea to do the easier one first :)

from react-bootstrap.

Hows the tooltips coming along? I reckon I might need them tomorrow. No pressure ;)

from react-bootstrap.

Haha :P pretty much done i think, just working on unit tests and docs now. I have had to split out the modal trigger logic from the general overlay logic as they seem to have pretty different use cases. Maybe i will send though a pull request now so you can take a look and see if there is nicer way to do things.

from react-bootstrap.

For the scroll watching logic this project might be a good reference, https://github.com/sakabako/scrollMonitor.

from react-bootstrap.

Cool, thanks. I hate trying to read the bootstrap code. I remember reading a blog post from one of the authors saying how he was pretending to be a beat poet or something when he wrote it. Its like he went out of his way to make it unreadable.

from react-bootstrap.

Is this still under work ?

from react-bootstrap.

We have not started anything on this, if you're up for a PR that adheres to @pieterv's original concept we'd love to have it.

from react-bootstrap.

Pull requests are welcome 😉

from react-bootstrap.

I am ok with not doing it. Though we should add some documentation to why we aren't in the docs, not that anyone has ever asked for this in recent history

from react-bootstrap.

Couple of additional thoughts,

The current Nav component already has the ability to select NavItem's based on a activeKey value, but will probably need some modifications to support nested Nav's and the basic nav style.

The target value might be safer to default it to document.body then allow DOM elements or React components to be passed through.

I like the idea of ScrollSpy component being split out from the Nav.

I wonder if the sections picked up by the ScrollSpy should be react components as well rather than just a div with an id, this would allow us to more easily setup a list of elements who's position should be checked on scroll. Something like:

<ScrollSpyNav>
  <NavItem key="btn">
    Buttons
    <Nav>
      <NavItem key="btn-groups">Button groups</NavItem>
      <NavItem key="btn-dropdowns">Button dropdowns</NavItem>
    </Nav>
  </NavItem>
  <NavItem key="panels">Panels</NavItem>
</ScrollSpyNav>

<ScrollSpySection key="btn">
  <h2>Buttons!</h2>
  <p>...</p>

  <ScrollSpySection key="btn-groups">
    <h3>Buttons!</h3>
    <p>...</p>
  </ScrollSpySection>
  <ScrollSpySection key="btn-dropdowns">
    <h3>Buttons!</h3>
    <p>...</p>
  </ScrollSpySection>
</ScrollSpySection>

<ScrollSpySection key="panels">
  <h2>Panels!</h2>
  <p>...</p>
</ScrollSpySection>

I would imagine the ScrollSpySection and ScrollSpyNav components in the previous example would register with a scroll watcher singleton that actually checks what section is active and scrolls to sections if requested, the singleton will save us from running the same calculations multiple times if multiple ScrollSpyNav's are used. It would be nice as well if the ScrollSpySection components could be notified if they are the active section, would be useful to know so you could activate animations or change styles based on this. This will probably require using a ScrollSpySectionMixin though to get access to the state.

Attempted import error: 'ScrollSpySection' is not exported from 'react-bootstrap'.

How did you import scroolSpySection

from react-bootstrap.