<commit_before>import Link from 'next/link'
import Layout from '../../../components/layout'
import markdown from 'markdown-in-js'
import Highlight from 'react-highlight'

export default ({ url }) => (
  <Layout url={url} title={'Idyll Documentation | Scrolling and DOM References'} >
    <link rel="stylesheet" href="../../../static/styles/tomorrow-night-eighties.css" />
    <div>
      <h1>Viewport Events</h1>

      <p>The following events are added as properties to all Idyll components:</p>
      <ul>
        <li><code>onEnterView</code> - triggered when a component partially enters the viewport.</li>
        <li><code>onEnterViewFully</code> - triggered when a component fully enters the viewport.</li>
        <li><code>onExitView</code> - triggered when a component partially exits the viewport.</li>
        <li><code>onExitViewFully</code> - triggered when a component fully enters the viewport.</li>
      </ul>

      <p>To customize the position at which these events get triggered (e.g. to trigger the <code>onEnterView</code> event only
      after a component is already 100 pixels inside the viewport), the <code>scrollOffset</code> property can be used.</p>
<commit_msg>typo fix<commit_after>import Link from 'next/link'
import Layout from '../../../components/layout'
import markdown from 'markdown-in-js'
import Highlight from 'react-highlight'

export default ({ url }) => (
  <Layout url={url} title={'Idyll Documentation | Scrolling and DOM References'} >
    <link rel="stylesheet" href="../../../static/styles/tomorrow-night-eighties.css" />
    <div>
      <h1>Viewport Events</h1>

      <p>The following events are added as properties to all Idyll components:</p>
      <ul>
        <li><code>onEnterView</code> - triggered when a component partially enters the viewport.</li>
        <li><code>onEnterViewFully</code> - triggered when a component fully enters the viewport.</li>
        <li><code>onExitView</code> - triggered when a component partially exits the viewport.</li>
        <li><code>onExitViewFully</code> - triggered when a component fully exits the viewport.</li>
      </ul>

      <p>To customize the position at which these events get triggered (e.g. to trigger the <code>onEnterView</code> event only
      after a component is already 100 pixels inside the viewport), the <code>scrollOffset</code> property can be used.</p>

{'fraction_non_alphanumeric': 0.12867956265769553, 'fraction_numerical': 0.004205214465937763, 'mean_word_length': 3.5400763358778624, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 67, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3139172', 'n_tokens_mistral': 678, 'n_tokens_neox': 656, 'n_words': 231}