Tweak example page

Author: karl-run

README.md

@@ -1,4 +1,4 @@
-# react-bottom-scroll-listener [![NPM version](https://img.shields.io/npm/v/react-bottom-scroll-listener.svg?style=flat)](https://www.npmjs.com/package/react-bottom-scroll-listener) ![Gzipped size](https://img.shields.io/badge/gzipped-2.1kb-brightgreen.png)
+# react-bottom-scroll-listener [![NPM version](https://img.shields.io/npm/v/react-bottom-scroll-listener.svg?style=flat)](https://www.npmjs.com/package/react-bottom-scroll-listener)  [![npm bundle size (minified)](https://img.shields.io/bundlephobia/minzip/react-bottom-scroll-listener.svg)](https://github.com/karl-run/react-css-vars)
 
 A simple React component that lets you listen for when you have scrolled to the bottom.
 

example/src/App.js

@@ -4,7 +4,7 @@ import BottomScrollListerer from 'react-bottom-scroll-listener'
 
 export default class App extends Component {
   state = {
-    alertOnBottom: false,
+    alertOnBottom: true,
   }
 
   handleToggleAlertOnBottom = () => {
@@ -21,18 +21,22 @@ export default class App extends Component {
 
   render() {
     return (
-      <div>
+      <div className="root">
         <label htmlFor="alertToggle">
           <input
             id="alertToggle"
             type="checkbox"
             checked={this.state.alertOnBottom}
             onChange={this.handleToggleAlertOnBottom}
           />
-          Show alert on bottom
+          <div>Show alert on bottom</div>
         </label>
         <BottomScrollListerer onBottom={this.handleOnBottom}>
-          <div style={{ height: '2000px', backgroundColor: 'palevioletred' }}>Scroll down!</div>
+          <div className="scrollbox">
+            <div>Scroll down! ▼▼▼</div>
+            <div>A bit more... ▼▼</div>
+            <div>Almost there... ▼</div>
+          </div>
         </BottomScrollListerer>
       </div>
     )

example/src/index.css

@@ -3,3 +3,31 @@ body {
   padding: 0;
   font-family: sans-serif;
 }
+
+.root {
+  background-color: paleturquoise;
+}
+
+.root > label > input {
+  margin: 8px;
+  height: 24px;
+  width: 24px;
+}
+
+.root > label {
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.scrollbox {
+  margin: 16px;
+  padding: 8px;
+  height: 1500px;
+  color: white;
+  background-color: palevioletred;
+}
+
+.scrollbox > div {
+  margin-bottom: 500px;
+}