Move styles to CSS

Author: vcarl

examples/basic/basic.js

@@ -8,24 +8,21 @@ let renderCount = 0;
 export class Basic extends PureComponent {
   render() {
     return (
-      <div style={{ height: 1500, margin: "0 30px" }}>
+      <div>
         <h2>Content before the Sticky...</h2>
-        <div style={{ marginBottom: 200 }} />
-        <StickyContainer
-          style={{ height: 500, background: "#ddd", padding: "0 30px" }}
-        >
+        <div className="gap short" />
+        <StickyContainer className="container">
           <Sticky>
             {({ style }) => (
               <Header style={style} renderCount={renderCount++} />
             )}
           </Sticky>
 
-          <h2 className="text-center" style={{ marginTop: 150 }}>
-            {"<StickyContainer />"}
-          </h2>
+          <h2 className="text-center">{"<StickyContainer />"}</h2>
         </StickyContainer>
-        <div style={{ marginBottom: 200 }} />
-        <h2>Content after the Sticky...</h2>
+        <div className="gap tall">
+          <h2>Content after the Sticky...</h2>
+        </div>
       </div>
     );
   }

examples/header.js

@@ -1,17 +1,13 @@
 import React from "react";
 
 export class Header extends React.Component {
+  static defaultProps = {
+    className: ""
+  };
   render() {
-    const { style, renderCount } = this.props;
+    const { style, renderCount, className } = this.props;
     return (
-      <div
-        style={{
-          height: 80,
-          overflow: "auto",
-          background: "#aaa",
-          ...style
-        }}
-      >
+      <div className={"header " + className} style={style}>
         <h2>
           <span className="pull-left">
             {"<Sticky /> "}

examples/index.js

@@ -10,7 +10,7 @@ ReactDOM.render(
   <Router>
     <div>
       <style>{styles}</style>
-      <div className="header">
+      <div className="navbar">
         <Link to="/basic">Basic</Link> <Link to="/relative">Relative</Link>{" "}
         <Link to="/stacked">Stacked</Link>
       </div>

examples/relative/relative.js

@@ -8,26 +8,17 @@ let renderCount = 0;
 export class Relative extends PureComponent {
   render() {
     return (
-      <div style={{ margin: 30 }}>
-        <StickyContainer
-          style={{
-            height: 250,
-            overflowY: "auto",
-            background: "#ddd",
-            padding: "0 30px"
-          }}
-        >
-          <div style={{ height: 500 }}>
-            <div style={{ height: 50 }} />
+      <div>
+        <StickyContainer className="container relative">
+          <div className="gap tall">
+            <div className="gap short" />
             <Sticky relative={true}>
               {({ style }) => (
                 <Header style={style} renderCount={renderCount++} />
               )}
             </Sticky>
-
-            <h2 className="text-center" style={{ marginTop: 150 }}>
-              overflowing container
-            </h2>
+            <div className="gap short" />
+            <h2>scrolling container</h2>
           </div>
         </StickyContainer>
       </div>

examples/stacked/stacked.js

@@ -4,26 +4,26 @@ import ReactDOM from "react-dom";
 import { Sticky, StickyContainer } from "../../src";
 import { Header } from "../header";
 
+const containerBg = i => `hsl(${i * 40}, 70%, 90%)`;
+const headerBg = i => `hsl(${i * 40}, 70%, 50%)`;
+
 export class Stacked extends PureComponent {
   render() {
     return (
       <div>
         {[1, 2, 3, 4, 5, 6, 7, 8].map(i => (
           <StickyContainer
             key={i}
-            style={{ height: 500, background: `hsl(${i * 40}, 70%, 90%)` }}
+            className="container"
+            style={{ background: containerBg(i) }}
           >
             <Sticky>
               {({ style }) => (
-                <Header
-                  style={{ ...style, background: `hsl(${i * 40}, 70%, 50%)` }}
-                />
+                <Header style={{ ...style, background: headerBg(i) }} />
               )}
             </Sticky>
 
-            <h2 className="text-center" style={{ marginTop: 150 }}>
-              {`<StickyContainer #${i} />`}
-            </h2>
+            <h2 className="text-center">{`<StickyContainer #${i} />`}</h2>
           </StickyContainer>
         ))}
       </div>

examples/styles.js

@@ -1,5 +1,6 @@
 export default `
 body {
+  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   padding: 0;
   margin: 0;
   margin-top: 2rem;
@@ -15,11 +16,39 @@ h2 {
   line-height: 1.5rem;
 }
 
-.header {
+.navbar {
   position: fixed;
   top: 0;
   padding: .5rem;
   background: white;
   z-index: 10;
 }
+
+.header {
+  height: 80px;
+  overflow: auto;
+  background: #aaa;
+}
+
+.container {
+  height: 500px;
+  background: #ddd;
+  padding: 0 2rem;
+}
+
+.gap {
+  height: 500px;
+}
+
+.gap.short {
+  height: 250px;
+}
+
+.gap.tall {
+  height: 1000px;
+}
+
+.container.relative {
+  overflow-y: auto;
+}
 `;