and onchange event callback and responsive

example/src/App.js

@@ -3,8 +3,9 @@ import Fullpage, { FullpageSection } from '@ap.cx/react-fullpage'
 
 export default class App extends Component {
   render () {
+
     return (
-      <Fullpage>
+      <Fullpage onChange={console.log}>
         <FullpageSection style={{
           backgroundColor: 'lime',
           color: 'darkGreen',
@@ -15,7 +16,7 @@ export default class App extends Component {
           justifyContent: 'center',
         }}>
           <div>
-            <h1 style={{fontSize: '4em'}}>Fullpage React Component</h1>
+            <h1 style={{fontSize: '4em'}}>React Fullpage</h1>
             <h2 style={{fontSize: '2em'}}>Create Fullscreen Scrolling Websites</h2>
           </div>
         </FullpageSection>

src/Fullpage.js

@@ -18,26 +18,31 @@ class Fullpage extends Component {
     this.warperRef = React.createRef();
     this.fullpageRef = React.createRef();
     this.timeout = null;
+    this.slides = null
     this.state = {
       translateY: 0,
+      currentSlide: null,
     }
     this.handleScroll = this.handleScroll.bind(this);
+    this.handleResize = this.handleResize.bind(this);
+    this.updateHistory = this.updateHistory.bind(this);
   }
 
   componentDidMount() {
     this.driver.current.style.height = `${this.fullpageRef.current.clientHeight}px`;
     const children = Array.from(this.fullpageRef.current.children)
-    const slides = children.filter(child => child.hasAttribute('isslide'))
-    this.setState({slides})
+    this.slides = children.filter(child => child.hasAttribute('isslide'))
     if (typeof window !== 'undefined')  {
       window.addEventListener('scroll', this.handleScroll);
+      window.addEventListener('resize', this.handleResize);
     }
   }
 
   componentWillUnmount() {
     // set body height == to 'auto'
-    if (typeof window !== 'undefined')  {
+    if (typeof window !== 'undefined') {
       window.removeEventListener('scroll', this.handleScroll);
+      window.removeEventListener('resize', this.handleResize);
     }
   }
 
@@ -47,42 +52,71 @@ class Fullpage extends Component {
     if (!ticking) {
       window.requestAnimationFrame(() => {
         // doSomething(lastKnownScrollPosition);
-        const slide = this.state.slides.find(slide => lastKnownScrollPosition < slide.offsetTop + slide.offsetHeight * 0.5)
-        this.setState({translateY: slide.offsetTop * -1})
-        clearTimeout(this.timeout);
-        this.timeout = setTimeout(() => window.scrollTo(0, slide.offsetTop),1000)
+        const slide = this.slides.find(slide => lastKnownScrollPosition < slide.offsetTop + slide.offsetHeight * 0.5)
+        if(this.state.currentSlide != slide){
+          this.setState({
+            currentSlide: slide,
+            translateY: slide.offsetTop * -1,
+          })
+          // update scrollY driver position
+          window.scrollTo(0, slide.offsetTop);
+          clearTimeout(this.timeout)
+          this.timeout = setTimeout(() => this.updateHistory(slide),1000)
+        }
+
+        ticking = false
+      });
+    }
+    ticking = true
+  }
+
+  handleResize() {
+    let ticking
+    if (!ticking) {
+      window.requestAnimationFrame(() => {
+        this.driver.current.style.height = `${this.fullpageRef.current.clientHeight}px`
+        this.setState({
+          translateY: this.state.currentSlide.offsetTop * -1,
+        })
         ticking = false
       });
     }
     ticking = true
   }
 
+  updateHistory(slide) {
+
+  }
+
   render() {
     const {
       children,
       navigation = true,
       style = {
-        position: 'fixed',
+        position: 'absolute',
         left: 0,
         right: 0,
       },
       warperStyle = {
-        position: 'absolute',
+        position: 'fixed',
         top: 0,
         left: 0,
         right: 0,
       },
       className = '',
       transitionTiming = 700,
+      onChange = null
     } = this.props
-
+
+    onChange(this.state)
+
     return (
       <div style={{ position: 'relative', backgroundColor: 'pink' }} ref={this.driver}>
         <div className={styles.fullpageWarper} style={{ ...warperStyle }} ref={this.warperRef}>
           <div className={styles.fullpage} style={{
             ...style,
-            transform: `translateY(${this.state.translateY}px)`,
             transition: `transform ${transitionTiming}ms cubic-bezier(0.645, 0.045, 0.355, 1.000)`,
+            transform: `translateY(${(this.state.translateY)}px)`
           }} ref={this.fullpageRef}>
             { children }
             { navigation && <Navigation data={children}/> }