react-sticky - npm Package Compare versions

Comparing version 2.3.1 to 2.4.0

package.json

 {
   "name": "react-sticky",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "Sticky component for React",
@@ -5,0 +5,0 @@ "main": "./sticky",

README.md

@@ -92,3 +92,3 @@ react-sticky
 #### className
-You can apecify a class name that would be applied to the resulting element:
+You can specify a class name that would be applied to the resulting element:
 
@@ -102,2 +102,14 @@ app.jsx
 
+#### style
+You can specify a style object that would be applied to the resulting element:
+
+app.jsx
+```js
+<Sticky style={{background: 'red'}}>
+  <header />
+</Sticky>
+```
+
+Note: In the event that `stickyStyle` rules conflict with `style` rules, `stickyStyle` rules take precedence ONLY while sticky state is active. 
+
 #### type
@@ -104,0 +116,0 @@ You can specify the type of element (`React.DOM.div` by default) that will be rendered:

sticky.js

@@ -9,2 +9,3 @@ var React = require('react');
       className: '',
+      style: {},
       stickyClass: 'sticky',
@@ -24,4 +25,3 @@ stickyStyle: {
     return {
-      events: ['load', 'scroll', 'resize', 'touchmove', 'touchend'],
-      style: {}
+      events: ['scroll', 'resize', 'touchmove', 'touchend']
     };
@@ -31,10 +31,10 @@ },
   top: function() {
-    return this.getDOMNode().getBoundingClientRect().top;
+    return this.domNode.getBoundingClientRect().top;
   },
 
   shouldBeSticky: function() {
-    var position = this.getDOMNode().style.position;
-    this.getDOMNode().style.position = 'relative';
+    var position = this.domNode.style.position;
+    this.domNode.style.position = 'relative';
     var shouldBeSticky = this.top() <= -this.props.topOffset;
-    this.getDOMNode().style.position = position;
+    this.domNode.style.position = position;
     return shouldBeSticky;
@@ -48,12 +48,3 @@ },
       if (isSticky !== shouldBeSticky) {
-        var nextState = { isSticky: shouldBeSticky };
-        if (shouldBeSticky) {
-          nextState.style = this.props.stickyStyle;
-          nextState.className = this.props.className + ' ' + this.props.stickyClass;
-        } else {
-          nextState.style = {};
-          nextState.className = this.props.className;
-        }
-        this.setState(nextState);
-        this.props.onStickyStateChange(shouldBeSticky);
+        this.nextState(shouldBeSticky);
       }
@@ -80,4 +71,10 @@ this.hasUnhandledEvent = false;
     this.state.events.forEach(function(type) {
-      window.addEventListener(type, this.handleEvent);
+      if (window.addEventListener) {
+        window.addEventListener(type, this.handleEvent);
+      } else {
+        window.attachEvent('on' + type, this.handleEvent);
+      }
     }, this);
+    this.domNode = React.findDOMNode ? React.findDOMNode(this) : this.getDOMNode();
+    this.hasUnhandledEvent = true;
     this.tick();
@@ -90,2 +87,3 @@ },
     }, this);
+    this.domNode = null;
     this.cancel();
@@ -108,2 +106,31 @@ },
 
+  nextStyle: function(shouldBeSticky) {
+    if (shouldBeSticky) {
+      var copyStyles = function(dest, source) {
+        for (var rule in source) {
+          dest[rule] = source[rule];
+        };
+        return dest;
+      }
+      return copyStyles(copyStyles({}, this.props.style), this.props.stickyStyle)
+    } else {
+      return this.props.style;
+    }
+  },
+
+  nextClassName: function(shouldBeSticky) {
+    return [this.props.className]
+      .concat(shouldBeSticky ? this.props.stickyClass : undefined)
+      .join(' ');
+  },
+
+  nextState: function(shouldBeSticky) {
+    this.setState({
+      isSticky: shouldBeSticky,
+      style: this.nextStyle(shouldBeSticky),
+      className: this.nextClassName(shouldBeSticky)
+    });
+    this.props.onStickyStateChange(shouldBeSticky);
+  },
+
   render: function() {
@@ -110,0 +137,0 @@ return this.props.type({

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

120

increased by0.84%

Number of lines in readme file

155

increased by8.39%

Worsened metrics

Total package byte prevSize

9023

decreased by-15.86%

Number of package files

5

decreased by-28.57%

No dependency changes