Open thebarty opened 5 years ago
@thebarty, I have the exact case and I'm curious if you've come up with a solution or not
@SilencerWeb its been a while. had a look at the project I needed this for. I endet up NOT using this package. react-stickynode seems to have worked better… give it a try. Enjoy!
@thebarty, thanks for the answer! I ended up using custom vanilla JS function :)
Not sure if the scenario I encountered is same as yours. I also have a nested layout (nested React Split layouts). The problem was that ScrollSpy only highlights the top link as the current scroll position.
In the end, I simply had to specify the rootEl prop.
The rootEl value is also tricky because I have nested containers.
The rootEl value has to be the topmost element that owns the scrollbar.
return <Scrollspy items={ ['section-title', 'section-1', 'section-2', 'section-3', 'section-4']} rootEl="#homeRight" ...
For anyone else wondering. What I decided to do is flatten the array, and create an object specifying the level and content. Something like this:
const h2H3Array = props.strapiArticles["articleSections"]
.map(section => {
return [
{ level: "h2", content: section["title"] },
headingParser(section["content"])
? headingParser(section["content"])
: headingParser(section["content"]),
].flat()
})
.flat()
.filter(item => typeof item !== "undefined")
headingParser
is a function I am using to parse our h3 headers form markdown. Anyways, after flattening array, it worked as expected.
@CharlieGreenman thanks for providing your solution. However, I cannot get it working with map function and send to nested component. See https://github.com/makotot/react-scrollspy/issues/209 . Could you help me and take a look? Many thanks
@CharlieGreenman thanks for providing your solution. However, I cannot get it working with map function and send to nested component. See https://github.com/makotot/react-scrollspy/issues/209 . Could you help me and take a look? Many thanks
Unfortunately your question is too open ended. If more specific, I could help
Thanks for getting back to @CharlieGreenman.
As you can read in this issue I posted: https://github.com/makotot/react-scrollspy/issues/209 , I have Home component (home page) with two nested components:
The ScrollSpy component does not work when I perform a map function in the Home component to generate the URLs for the NavBar component.
Home component
import NavBar from "./NavBar";
import Article from "./Article";
import React, { Component, Fragment } from "react";
class Home extends Component {
render() {
const { articles } = this.props;
return (
<Fragment>
<div>
{articles.map((article) => (
<NavBar key={article.id} {...article} />
))}
</div>
<div>
{articles.map((article) => (
<Article key={article.id} {...article} />
))}
</div>
</Fragment>
);
}
}
export default Home;
import React, { Fragment, Component } from 'react'
import Scrollspy from 'react-scrollspy'
class NavBar extends Component { render() { const {id, title} = this.props return (
)
}
}
export default NavBar
2. Article component
import React, { Component } from 'react'
class Article extends Component { render() { const {id, title, body} = this.props return (
{body}
)
}
}
export default Article
If I manually type all the articles (without map function) in the NavBar component it works but when using the map function the ScrollSpy component doesn't work anymore.
Any advice or tips are welcome! If you require more code or details let me know! Many thanks
I also went for a similar approach as @CharlieGreenman, I flattened my array and everything works like a charm. My jsx doesn't have the same nested structure, so I encoded the hierarchy of my tree/data by applying classnames based on my desired hierarchy of the actual data. Luckily I didn't need complex styling or that nested structure, so it was much more straightforward for me.
Hi guys,
can NOT get it working, when using nested component like