@shaai/react - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/index.js

@@ -12,4 +12,2 @@ "use strict";
 
-var _shaai = _interopRequireDefault(require("@shaai/shaai"));
-
 var _htmlElementToReact = require("html-element-to-react");
@@ -31,2 +29,4 @@
 
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -36,48 +36,55 @@
 
-var ShaaiReact =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(ShaaiReact, _React$Component);
+var _default = function _default(Scroll) {
+  var ShaaiReact =
+  /*#__PURE__*/
+  function (_React$Component) {
+    _inherits(ShaaiReact, _React$Component);
 
-  function ShaaiReact(props) {
-    var _this;
+    function ShaaiReact(props) {
+      var _this;
 
-    _classCallCheck(this, ShaaiReact);
+      _classCallCheck(this, ShaaiReact);
 
-    _this.state = {
-      currentDOM: null
-    };
-    return _possibleConstructorReturn(_this);
-  }
-
-  _createClass(ShaaiReact, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var Scroll = (0, _shaai["default"])(this.props.scroll || 'scroll-ink');
-      this.scroll = new Scroll(this.props.config);
+      _this = _possibleConstructorReturn(this, _getPrototypeOf(ShaaiReact).call(this, props));
+      _this.state = {
+        currentDOM: null
+      };
+      _this.scroll = new Scroll(props.config);
+      return _this;
     }
-  }, {
-    key: "load",
-    value: function load(templates) {
-      this.scroll.load(templates);
-    }
-  }, {
-    key: "subscribe",
-    value: function subscribe(cb) {
-      this.scroll.subscribe(cb);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return _react["default"].createElement(_react["default"].Fragment, null, (0, _htmlElementToReact.convert)(this.state.currentDOM));
-    }
-  }]);
 
+    _createClass(ShaaiReact, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        var _this2 = this;
+
+        this.scroll.load(this.props.templates);
+        this.scroll.subscribe(function (dom) {
+          dom && _this2.setState({
+            currentDOM: dom
+          });
+        });
+      }
+    }, {
+      key: "subscribe",
+      value: function subscribe(cb) {
+        this.scroll.subscribe(cb);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        return _react["default"].createElement(_react["default"].Fragment, null, this.state.currentDOM && (0, _htmlElementToReact.convert)(this.state.currentDOM));
+      }
+    }]);
+
+    return ShaaiReact;
+  }(_react["default"].Component);
+
+  ShaaiReact.propTypes = {
+    config: _propTypes["default"].object.isRequired,
+    templates: _propTypes["default"].object
+  };
   return ShaaiReact;
-}(_react["default"].Component);
+};
 
-exports["default"] = ShaaiReact;
-ShaaiReact.propTypes = {
-  config: _propTypes["default"].object,
-  scrollName: _propTypes["default"].string
-};
+exports["default"] = _default;

index.js

 import React from 'react'
 import PropTypes from 'prop-types'
-import Shaai from '@shaai/shaai'
 import { convert } from 'html-element-to-react'
 
-export default class ShaaiReact extends React.Component {
-    constructor(props) {
-        this.state = {
-            currentDOM: null
+export default (Scroll) => {
+    class ShaaiReact extends React.Component {
+        constructor(props) {
+            super(props)
+            this.state = {
+                currentDOM: null
+            }
+            this.scroll = new Scroll(props.config)
         }
-    }
 
-    componentDidMount() {
-        let Scroll = Shaai(this.props.scroll || 'scroll-ink')
-        this.scroll = new Scroll(this.props.config)
-    }
+        componentDidMount() {
+            this.scroll.load(this.props.templates)
+            this.scroll.subscribe((dom) => {
+                dom && this.setState({ currentDOM: dom })
+            })
+        }
 
-    load(templates) {
-        this.scroll.load(templates)
+        subscribe(cb) {
+            this.scroll.subscribe(cb)
+        }
+    
+        render() {
+            return(
+                <>
+                    { this.state.currentDOM && convert(this.state.currentDOM) }
+                </>
+            )
+        }
     }
 
-    subscribe(cb) {
-        this.scroll.subscribe(cb)
+    ShaaiReact.propTypes = {
+        config: PropTypes.object.isRequired,
+        templates: PropTypes.object
     }
 
-    render() {
-        return(
-            <>
-                { convert(this.state.currentDOM) }
-            </>
-        )
-    }
-}
-
-ShaaiReact.propTypes = {
-    config: PropTypes.object,
-    scrollName: PropTypes.string
+    return ShaaiReact
 }

package.json

 {
   "name": "@shaai/react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React wrapper for Shaai",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -1,2 +0,27 @@
-# react
-React wrapper for Shaai
+![](https://i.imgur.com/DBhvZ2I.jpg)
+# @shaai/react
+This is a React wrapper for Shaai. It returns a React component which can be placed wherever you want to show your blogs.
+
+## Install
+`npm i --save @shaai/react`
+
+## Usage
+```jsx
+import withShaai from '@shaai/react'
+import ScrollInk from '@shaai/scroll-ink'
+
+//Pass in the template
+const Shaai = withShaai(ScrollInk)
+
+class App extends React.Component {
+    render() {
+        return (
+            <div className="App">
+                <Shaai
+                    config={config}
+                />
+            </div>
+        );
+    }
+}
+```

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

Total package byte prevSize

7450

increased by18.57%

Lines of code

100

increased by8.7%

Number of lines in readme file

27

increased by800%

No dependency changes