JSFiddle - React, Tailwind, and code Playground

by jestho

JavaScript

import React, { Component } from 'react';

export default class ScrollControl extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentScreen: null
    };
  }

  componentDidMount() {
    this.firstScreen = this.wrap.firstChild;
  }

  handleNext = (evt) => {
    evt.preventDefault();

    const current = this.state.currentScreen || this.firstScreen;
    const next = current.nextElementSibling || this.firstScreen;

    next.scrollIntoView();

    this.setState({ currentScreen: next });
  }

  render() {
    return (
      <div ref={(c) => { this.wrap = c; }}>
        {this.props.children}
        <button style={{ position: 'fixed', bottom: 0, right: 0 }} onClick={this.handleNext}>Next</button>
      </div>
    );
  }
}