javascript - how to use react-springy-parallax -

how use scrollto in react-springy-parallax?

i'm trying use react-springy-parallax in simple portfolio page, can click springy parallax scroll next page want able use nav links well, here how app laid out:

app.js

class app extends react.component {   constructor() {     super()     this.ref = 'parallax'   }   render() {     return (       <div>         <parallax ref={this.ref} pages={4}>            <parallax.layer             offset={0}             speed={0.5}             onclick={() => this.refs.parallax.scrollto(1)}           >             <nav />             <header />           </parallax.layer>           ... 

so onclick here scrolls next page, want able in nav component click about link , scroll +1 scrollto(1)

here nav component:

nav.js

class nav extends react.component {    render() {     return (       <div classname="nav">         <ul classname="links">           <li>             <a href="#about">about</a>           </li>           ... 

i did try importing scrollto named export react-springy-parallax nav component got error in chrome dev console saying it's not function

i'm trying use click handler:

class nav extends react.component {    render() {     function handleclick(e) {       e.preventdefault()       console.log(e)     }     return (       <div classname="nav">         <ul classname="links">           <li>             <a               href="#"               onclick={handleclick}             >                           </a>           </li>           ... 

but don't know how call app.js call scrollto

anyone have ideas?

logged issue repo owner , kind enough give few pointers:

use contexttypes access scrollto method parallax

in nav component use:

nav.contexttypes = { parallax: react.proptypes.object } 

this allow use scrollto method

something like:

class nav extends react.component {   render() {     return (       <div classname="nav">         <ul classname="links">           <li>             <a               href=""               onclick={this.context.parallax.scrollto(0)}             >               home             </a>           </li>           <li>             <a               href=""               onclick={this.context.parallax.scrollto(1)}             >                           </a>           </li> 

you can pass function prop, so:

class app extends react.component {   constructor(props) {     super(props)     this.handlescroll = value => this.parallax && this.parallax.scrollto(value)   }   render() {     return (       <div>         <parallax           ref={ref => (this.parallax = ref)}           pages={4}         >          <parallax.layer           offset={0}           speed={0.5}           onclick={() => this.handlescroll(1)}         >           <nav handlescroll={this.handlescroll} /> 

then nav component use props onclick={() => this.props.handlescroll(page)} page being page number want scroll to.