{"size": 4696, "ext": "js", "max_stars_repo_path": "gh-pages/pages/stepEvent.js", "max_stars_repo_name": "thierryc/react-scrollama-wrapper", "max_stars_repo_stars_event_min_datetime": "2021-11-02T23:54:09.000Z", "max_stars_repo_stars_event_max_datetime": "2021-11-02T23:54:09.000Z", "max_issues_repo_path": "gh-pages/pages/stepEvent.js", "max_issues_repo_name": "thierryc/react-scrollama-wrapper", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "gh-pages/pages/stepEvent.js", "max_forks_repo_name": "thierryc/react-scrollama-wrapper", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 32.1643835616, "max_line_length": 101, "alphanum_fraction": 0.5048977853}
import React from "react"
import Head from "next/head"
import styles from "../styles/Home.module.css"
import { Scrollama, Step } from "@ap.cx/react-scrollama-wrapper"

export default function Home() {
  const [step, setStep] = React.useState(null)
  const [progress, setProgress] = React.useState(null)
  const [direction, setDirection] = React.useState(null)
  const [message, setMessage] = React.useState("")

  const onStepEnter = (step) => {
    /* add your logic here */
    const { element, direction } = step
    setMessage(JSON.stringify(element.dataset, null, 2))
    setDirection(direction)
    setStep(step)
  }

  const onStepExit = (step) => {
    /* add your logic here */
  }

  const onStepProgress = (step) => {
    /* add your logic here */
    const { progress } = step
    setProgress(progress)
  }

  return (
    <div className={styles.container}>
      <Head>
        <title>React Scrollama Wrapper</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main} style={{'--progress': Math.round((progress * 1000) / 10) + '%'}}>
        <Scrollama
          className={styles.scrolly}
          offset={0.33}
          progress
          onStepProgress={onStepProgress}
          onStepEnter={onStepEnter}
          onStepExit={onStepExit}
          debug
        >
          <Step
            className={styles.step}
            style={{ marginTop: "33vh", minHeight: "66vh" }}
          >
            <a href="https://www.anotherplanet.io">
              <h2>Scrollama &rarr;</h2>
              <p>
                Scrollama is a modern and lightweight JavaScript library for
                scrollytelling using IntersectionObserver in favor of scroll
                events.
              </p>
              <p>
                Using IntersectionObserver abstracts element-in-view detection
                and removes the need to monitor scroll events, which contribute
                towards a sluggish experience.
              </p>
            </a>
          </Step>
          <Step className={styles.step} style={{ minHeight: "80vh" }}>
            <a href="https://www.anotherplanet.io">
              <h2>onStepEnter &rarr;</h2>
              <p>
                Callback that fires when the top or bottom edge of a step
                element enters the offset threshold.
              </p>
            </a>
          </Step>
          <Step
            className={styles.step}
            style={{ minHeight: "130vh" }}
            data-step-name={"onStepEnter"}
          >
            <a href="https://www.anotherplanet.io">
              <h2>onStepExit &rarr;</h2>
              <p>
                Callback that fires when the top or bottom edge of a step
                element exits the offset threshold.
              </p>
            </a>
          </Step>

          <Step
            className={styles.step}
            data-offset={0}
            style={{ minHeight: "66vh" }}
          >
            <a href="https://www.anotherplanet.io">
              <h2>onStepProgress &rarr;</h2>
              <p>
                Callback that fires the progress (0 - 1) a step has made through
                the threshold.
              </p>
            </a>
          </Step>

          <Step className={styles.step} style={{ minHeight: "80vh" }}>
            <a href="https://www.anotherplanet.io">
              <h2>props &rarr;</h2>
              <p>
                Every props set to the step is sent to the scrollama component
                and can be used in the srollyteling.
              </p>
              <p>Like data for datavise, image url, …</p>
            </a>
          </Step>

          <Step
            className={styles.step}
            style={{ marginBottom: "67vh", minHeight: "60vh" }}
          >
            <a href="https://www.anotherplanet.io">
              <h2>Anotherplanet.io &rarr;</h2>
              <p>My Self Bragging page about my life and work.</p>
            </a>
          </Step>
        </Scrollama>

        <div className={styles.board}>
          <h1 className={styles.title}>
            Welcome to <br />
            React Scrollama Wrapper
          </h1>
          {step && (
            <div>
              step {step.index} entered from {step.direction}
            </div>
          )}
          {progress !== null && (
            <div>progress: {Math.round((progress * 1000) / 10)}</div>
          )}
          {direction && <div>direction: {direction}</div>}
          <h3>Data</h3>
          {message && <pre>{message}</pre>}
        </div>
      </main>
    </div>
  )
}
