react-css-marquee - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/index.d.ts

@@ -1,3 +0,3 @@
-import React from 'react';
-interface MarqueeProps {
+/// <reference types="react" />
+declare type MarqueeProps = {
     text: string;
@@ -12,8 +12,9 @@ speed?: number;
     namespace?: string;
-}
+    disableDefaultStyles?: boolean;
+};
 declare const useWindowSize: () => {
     [T: string]: number;
 };
-declare const Marquee: React.SFC<MarqueeProps>;
+declare const Marquee: ({ text, direction, spacing, size, styles, speed, disableDefaultStyles, namespace, orientation, }: MarqueeProps) => JSX.Element;
 export { useWindowSize };
 export default Marquee;

dist/index.js

@@ -18,7 +18,3 @@ "use strict";
 var react_1 = __importDefault(require("react"));
-var createHash = function () {
-    return Math.random()
-        .toString(36)
-        .substring(7);
-};
+var createHash = function () { return Math.random().toString(36).substring(7); };
 var useWindowSize = function () {
@@ -39,9 +35,8 @@ var getSize = function () { return ({
 var Marquee = function (_a) {
-    var _b = _a.text, text = _b === void 0 ? 'REACT MARQUEE' : _b, _c = _a.direction, direction = _c === void 0 ? 'left' : _c, _d = _a.spacing, spacing = _d === void 0 ? 4 : _d, _e = _a.size, size = _e === void 0 ? 3 : _e, styles = _a.styles, _f = _a.speed, speed = _f === void 0 ? 5 : _f, _g = _a.namespace, namespace = _g === void 0 ? 'react-marquee' : _g, _h = _a.orientation, orientation = _h === void 0 ? 'horizontal' : _h;
-    console.log('<Marquee />', { namespace: namespace });
-    var _j = react_1["default"].useState(0), height = _j[0], setHeight = _j[1];
-    var _k = react_1["default"].useState(0), width = _k[0], setWidth = _k[1];
+    var _b = _a.text, text = _b === void 0 ? 'REACT MARQUEE' : _b, _c = _a.direction, direction = _c === void 0 ? 'left' : _c, _d = _a.spacing, spacing = _d === void 0 ? 4 : _d, _e = _a.size, size = _e === void 0 ? 3 : _e, styles = _a.styles, _f = _a.speed, speed = _f === void 0 ? 5 : _f, _g = _a.disableDefaultStyles, disableDefaultStyles = _g === void 0 ? false : _g, _h = _a.namespace, namespace = _h === void 0 ? 'react-marquee' : _h, _j = _a.orientation, orientation = _j === void 0 ? 'horizontal' : _j;
+    var _k = react_1["default"].useState(0), height = _k[0], setHeight = _k[1];
+    var _l = react_1["default"].useState(0), width = _l[0], setWidth = _l[1];
     var windowSize = useWindowSize();
-    var reactRef = react_1["default"].useCallback(function (node) {
-        if (node !== null) {
+    var ref = react_1["default"].useCallback(function (node) {
+        if (node) {
             setHeight(node.parentNode.getBoundingClientRect().height);
@@ -64,11 +59,7 @@ setWidth(node.parentNode.getBoundingClientRect().width);
     var hash = react_1["default"].useMemo(createHash, []);
-    return (react_1["default"].createElement("div", { ref: reactRef },
-        react_1["default"].createElement("style", null, "\n          @keyframes " + namespace + "__animation-" + hash + " {\n            100% {\n              transform: translate3d(-100%, 0, 0);\n            }\n          }\n        "),
-        react_1["default"].createElement("div", { className: namespace + "__wrapper-" + hash, style: {
-                fontSize: '16px',
-                width: setItemWidth + 'px',
-                height: setItemHeight + 'px',
-                transform: setWrapperTransform
-            } },
-            react_1["default"].createElement("div", { className: "react-marquee__container " + namespace + "__container-" + hash, style: {
+    return (react_1["default"].createElement("div", { ref: ref },
+        react_1["default"].createElement("style", null, "\n          @keyframes " + namespace + "__animation {\n            100% {\n              transform: translate3d(-100%, 0, 0);\n            }\n          }\n          ." + namespace + "__wrapper-" + hash + " {\n            font-size: 16px;\n            transform: " + setWrapperTransform + ";\n          }\n          ." + namespace + "__text-" + hash + " {\n              align-self: center;\n              text-rendering: optimizeLegibility;\n              transform: translateZ(0);\n              animation: " + namespace + "__animation linear infinite;\n              animation-direction: " + setDirection + ";\n              animation-duration: " + setSpeed + "s;\n          }\n        "),
+        !disableDefaultStyles && (react_1["default"].createElement("style", null, "\n            ." + namespace + "__wrapper {\n              width: " + setItemWidth + "px;\n              height: " + setItemHeight + "px;\n            }\n            ." + namespace + "__text-" + hash + " {\n              font-size: " + size + "em;\n            }\n          ")),
+        react_1["default"].createElement("div", { className: namespace + "__wrapper " + namespace + "__wrapper-" + hash },
+            react_1["default"].createElement("div", { className: namespace + "__container", style: {
                     display: 'flex',
@@ -82,6 +73,6 @@ flexFlow: 'row nowrap',
                 } },
-                react_1["default"].createElement("div", { className: "react-marquee__text " + namespace + "__text-" + hash, style: __assign({ alignSelf: 'center', textRendering: 'optimizeLegibility', transform: 'translateZ(0)', whiteSpace: 'pre', fontSize: size + 'em', animation: namespace + '__animation-' + hash + ' linear' + ' infinite', animationDirection: setDirection, animationDuration: setSpeed + 's' }, styles) }, textWithSpaces),
-                react_1["default"].createElement("div", { className: "react-marquee__text " + namespace + "__text-" + hash, style: __assign({ alignSelf: 'center', textRendering: 'optimizeLegibility', transform: 'translateZ(0)', whiteSpace: 'pre', fontSize: size + 'em', animation: namespace + '__animation-' + hash + ' linear' + ' infinite', animationDirection: setDirection, animationDuration: setSpeed + 's' }, styles) }, textWithSpaces)))));
+                react_1["default"].createElement("div", { className: namespace + "__text " + namespace + "__text-" + hash, style: __assign({ whiteSpace: 'pre' }, styles) }, textWithSpaces),
+                react_1["default"].createElement("div", { className: namespace + "__text " + namespace + "__text-" + hash, style: __assign({ whiteSpace: 'pre' }, styles) }, textWithSpaces)))));
 };
 exports["default"] = Marquee;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-css-marquee",
   "description": "The classic <marquee> in React and CSS",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "types": "dist/index.d.ts",

README.md

 # React CSS Marquee
 
+[Demo](http://react-css-marquee.surge.sh/)
+
+
 [![Build Status](https://travis-ci.org/samuelweckstrom/react-css-marquee.svg?branch=master)](https://travis-ci.org/samuelweckstrom/react-css-marquee)
@@ -45,1 +48,2 @@ [![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
 |`namespace: string`| Pass own CSS namespace|
+|`disableDefaultStyles: boolean`| Disable default styling

No alert changes

Improved metrics

Number of lines in readme file

49

increased by8.89%

Worsened metrics

Total package byte prevSize

11069

decreased by-0.05%

Lines of code

94

decreased by-8.74%

No dependency changes