app-bar - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

CHANGELOG.md

@@ -7,2 +7,6 @@ # Changelog
 
+## [1.3.0] - 2018-05-05
+### Removed
+- Set styles the old way for SSR support (this leaves out Safari's `position: -webkit-sticky;` from the default styles).
+
 ## [1.2.0] - 2018-05-05
@@ -9,0 +13,0 @@ ### Changed

index.d.ts

@@ -20,3 +20,2 @@ /// <reference types="react" />
     private createRef;
-    private setStyle;
     private animateTop;
@@ -23,0 +22,0 @@ private handleScroll;

index.js

@@ -49,12 +49,2 @@ "use strict";
         };
-        _this.setStyle = function () {
-            if (_this.internalRef) {
-                _this.internalRef.setAttribute('style', 'position: -webkit-sticky;' +
-                    'position: sticky;' +
-                    'top: 0;' +
-                    'transition: top 100ms;' +
-                    'width: 100%;' +
-                    'display: block;');
-            }
-        };
         _this.animateTop = function () {
@@ -106,3 +96,2 @@ if (!_this.internalRef || _this.props.disabled) {
         }
-        this.setStyle();
     };
@@ -129,3 +118,9 @@ AppBar.prototype.componentDidUpdate = function (_a) {
         var _a = this.props, children = _a.children, innerRef = _a.innerRef, props = __rest(_a, ["children", "innerRef"]);
-        return (React.createElement("div", __assign({ ref: this.createRef }, props), children));
+        var style = {
+            display: 'block',
+            position: 'sticky',
+            transition: 'top 100ms',
+            width: '100%'
+        };
+        return (React.createElement("div", __assign({ ref: this.createRef, style: style }, props), children));
     };
@@ -132,0 +127,0 @@ AppBar.defaultProps = {

package.json

 {
   "name": "app-bar",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "An app bar for React that stays out of your way",
@@ -5,0 +5,0 @@ "licence": "MIT",

README.md

@@ -14,2 +14,9 @@ # app-bar
 
+## Requirements
+
+- React
+- Something to style the `<AppBar />` with, like [styled-components](https://github.com/styled-components/styled-components) or [emotion](https://github.com/emotion-js/emotion)
+- `window.requestAnimationFrame`. You could use a [polyfill](https://github.com/chrisdickinson/raf) for older browsers
+- `position: sticky;` support. For Safari, you should add `position: -webkit-sticky;` to your own styles. Unfortunately this is not possible to support with React's inline style syntax.
+
 ## Usage
@@ -32,2 +39,3 @@
   height: 64px;
+  position: -webkit-sticky /* This is needed for Safari support */
 `;
@@ -52,7 +60,6 @@
   position: sticky;
-  top: 0;
   width: 100%;
 ```
 
-In other words, `<AppBar />` is a fixed full-width element that sticks to the top of your screen. The only functionality is that `<AppBar />` will move out the viewport when scrolling down, and back in when scrolling up.
+In other words, `<AppBar />` is a fixed full-width element that sticks to the top of your screen. The only functionality is that `<AppBar />` will move out the viewport when scrolling down, and back in when scrolling up. This is done by controlling the `top` CSS property.
 
@@ -59,0 +66,0 @@ ### Disabling

No alert changes

Improved metrics

Total package byte prevSize

14060

increased by3.1%

Number of lines in readme file

69

increased by11.29%

Worsened metrics

Lines of code

157

decreased by-3.68%

No dependency changes