Can't get the example to run

stlcardsfan commented 8 years ago

Where is Section component defined? Have a working example to view on jsfiddle or similar?

jimmiebtlr commented 8 years ago

Section is intended to be your own react components.

jimmiebtlr commented 8 years ago

Just needs the navRoute param specified.

stlcardsfan commented 8 years ago

Bummer, I figured so but replacing them with divs and then with my own simple component didn't work. Mind taking a look at my example:

const React = require('react'); const ScrollSpy = require('react-scrollspy-component ');

class Nav extends React.Component { render(){ return this.props.active; } }

class Section extends React.Component { render(){ return (

{this.props.children}

); } }

class App extends React.Component { constructor(props) { super(props); this.state = {}; }

render() { return (

  <Section navRoute="section1">Section 1</Section>
  <Section navRoute="section2">Section 2</Section>
  <Section navRoute="section3">Section 3</Section>
  <Section navRoute="section4">Section 4</Section>
  <Section navRoute="section5">Section 5</Section>
</ScrollSpy>);

} }

module.exports = App;

jimmiebtlr commented 8 years ago

I assume your App return isn't displaying correctl?

Should be something like

<ScrollSpy navType="Nav">
       <Nav isNav="true"/>
       <Section navRoute="section1">Section 1</Section>
       <Section navRoute="section2">Section 2</Section>
       <Section navRoute="section3">Section 3</Section>
       <Section navRoute="section4">Section 4</Section>
       <Section navRoute="section5">Section 5</Section>
     </ScrollSpy>

stlcardsfan commented 8 years ago

Ugh, I should have pasted my example in a code block. Sorry, here's how it really looks:

const React = require('react');
const ScrollSpy = require('react-scrollspy-component');

class Nav extends React.Component {
   render(){
     return this.props.active;
   }
 }

class Section extends React.Component {
  render(){
    return (<div>{this.props.children}</div>);
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (<ScrollSpy navType="Nav">
      <Nav isNav="true"/>
      <Section navRoute="section1">Section 1</Section>
      <Section navRoute="section2">Section 2</Section>
      <Section navRoute="section3">Section 3</Section>
      <Section navRoute="section4">Section 4</Section>
      <Section navRoute="section5">Section 5</Section>
    </ScrollSpy>);
  }
}

module.exports = App;

jimmiebtlr commented 8 years ago

Double check that the scrolling is happening in scrollspy and not body

On Wed, May 11, 2016, 11:04 AM stlcardsfan notifications@github.com wrote:

Ugh, I should have pasted my example in a code block. Here's how it really looks:

const React = require('react'); const ScrollSpy = require('react-scrollspy-

component');

class Nav extends React.Component { render(){ return this.props.active; } }

class Section extends React.Component { render(){ return (
{this.props.children}
); } }

class App extends React.Component { constructor(props) { super(props); this.state = {}; }

render() { return (
  <Section navRoute="section1">Section 1</Section>
  <Section navRoute="section2">Section 2</Section>
  <Section navRoute="section3">Section 3</Section>
  <Section navRoute="section4">Section 4</Section>
  <Section navRoute="section5">Section 5</Section>
</ScrollSpy>);
} }

module.exports = App;

— You are receiving this because you commented.

Reply to this email directly or view it on GitHub https://github.com/jimmiebtlr/react-scrollspy-component/issues/2#issuecomment-218506896

jimmiebtlr / react-scrollspy-component

Can't get the example to run #2