react-custom-share - npm Package Compare versions

Comparing version 0.0.17 to 0.0.18

dist/ShareButton.js

@@ -103,5 +103,5 @@ 'use strict';
   },
-  className: _propTypes2.default.string
+  className: _propTypes2.default.any
 };
 
 exports.default = ShareButton;

dist/styled/ShareBlockStandard.js

@@ -9,3 +9,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        justify-content: center;\n      '], ['\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        justify-content: center;\n      ']);
+var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n'], ['\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n']);
 
@@ -30,6 +30,6 @@ var _emotion = require('emotion');
 
+var styles = (0, _emotion.css)(_templateObject);
+
 var ShareBlockStandard = function ShareBlockStandard(props) {
-  return _react2.default.createElement(_ShareBlock2.default, _extends({
-    className: (0, _emotion.css)(_templateObject)
-  }, props));
+  return _react2.default.createElement(_ShareBlock2.default, _extends({ className: styles }, props));
 };
@@ -36,0 +36,0 @@

dist/styled/ShareButtonCircle.js

@@ -9,3 +9,4 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n        align-items: center;\n        background: ', ';\n        border: 0;\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex;\n        height: 44px;\n        justify-content: center;\n        margin: 3px;\n        position: relative;\n        transition: 0.3s;\n        width: 44px;\n\n        &::before {\n          background-color: rgba(255, 255, 255, 0.2);\n          border-bottom-left-radius: 100px;\n          border-top-left-radius: 100px;\n          color: inherit;\n          content: \'\';\n          height: 100%;\n          left: 50%;\n          position: absolute;\n          top: 50%;\n          transform: translate(-100%, -50%);\n          transition: 0.2s;\n          width: 50%;\n        }\n\n        & > svg {\n          fill: #fff;\n          height: 70%;\n          transform: scale(1);\n          transition: 0.3s;\n          width: 70%;\n          z-index: 1;\n        }\n\n        &:hover {\n          &::before {\n            background-color: rgba(0, 0, 0, 0.1);\n            transform: translate(0%, -50%) rotateY(180deg);\n          }\n\n          & > svg {\n            transform: scale(1.2);\n          }\n        }\n\n        @media (any-hover: none) {\n          &:hover {\n            &::before {\n              background-color: rgba(255, 255, 255, 0.2);\n              transform: translate(-100%, -50%);\n            }\n\n            & > svg {\n              transform: scale(1);\n            }\n          }\n        }\n\n        @media (min-width: 330px) {\n          margin: 5px;\n        }\n\n        @media (min-width: 600px) {\n          margin: 7px;\n        }\n\n        @media (min-width: 1025px) {\n          margin: 10px;\n        }\n      '], ['\n        align-items: center;\n        background: ', ';\n        border: 0;\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex;\n        height: 44px;\n        justify-content: center;\n        margin: 3px;\n        position: relative;\n        transition: 0.3s;\n        width: 44px;\n\n        &::before {\n          background-color: rgba(255, 255, 255, 0.2);\n          border-bottom-left-radius: 100px;\n          border-top-left-radius: 100px;\n          color: inherit;\n          content: \'\';\n          height: 100%;\n          left: 50%;\n          position: absolute;\n          top: 50%;\n          transform: translate(-100%, -50%);\n          transition: 0.2s;\n          width: 50%;\n        }\n\n        & > svg {\n          fill: #fff;\n          height: 70%;\n          transform: scale(1);\n          transition: 0.3s;\n          width: 70%;\n          z-index: 1;\n        }\n\n        &:hover {\n          &::before {\n            background-color: rgba(0, 0, 0, 0.1);\n            transform: translate(0%, -50%) rotateY(180deg);\n          }\n\n          & > svg {\n            transform: scale(1.2);\n          }\n        }\n\n        @media (any-hover: none) {\n          &:hover {\n            &::before {\n              background-color: rgba(255, 255, 255, 0.2);\n              transform: translate(-100%, -50%);\n            }\n\n            & > svg {\n              transform: scale(1);\n            }\n          }\n        }\n\n        @media (min-width: 330px) {\n          margin: 5px;\n        }\n\n        @media (min-width: 600px) {\n          margin: 7px;\n        }\n\n        @media (min-width: 1025px) {\n          margin: 10px;\n        }\n      ']);
+var _templateObject = _taggedTemplateLiteral(['\n  align-items: center;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  height: 44px;\n  justify-content: center;\n  margin: 3px;\n  position: relative;\n  transition: 0.3s;\n  width: 44px;\n\n  &::before {\n    background-color: rgba(255, 255, 255, 0.2);\n    border-bottom-left-radius: 100px;\n    border-top-left-radius: 100px;\n    color: inherit;\n    content: \'\';\n    height: 100%;\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-100%, -50%);\n    transition: 0.2s;\n    width: 50%;\n  }\n\n  & > svg {\n    fill: #fff;\n    height: 70%;\n    transform: scale(1);\n    transition: 0.3s;\n    width: 70%;\n    z-index: 1;\n  }\n\n  &:hover {\n    &::before {\n      background-color: rgba(0, 0, 0, 0.1);\n      transform: translate(0%, -50%) rotateY(180deg);\n    }\n\n    & > svg {\n      transform: scale(1.2);\n    }\n  }\n\n  @media (any-hover: none) {\n    &:hover {\n      &::before {\n        background-color: rgba(255, 255, 255, 0.2);\n        transform: translate(-100%, -50%);\n      }\n\n      & > svg {\n        transform: scale(1);\n      }\n    }\n  }\n\n  @media (min-width: 330px) {\n    margin: 5px;\n  }\n\n  @media (min-width: 600px) {\n    margin: 7px;\n  }\n\n  @media (min-width: 1025px) {\n    margin: 10px;\n  }\n'], ['\n  align-items: center;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  height: 44px;\n  justify-content: center;\n  margin: 3px;\n  position: relative;\n  transition: 0.3s;\n  width: 44px;\n\n  &::before {\n    background-color: rgba(255, 255, 255, 0.2);\n    border-bottom-left-radius: 100px;\n    border-top-left-radius: 100px;\n    color: inherit;\n    content: \'\';\n    height: 100%;\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-100%, -50%);\n    transition: 0.2s;\n    width: 50%;\n  }\n\n  & > svg {\n    fill: #fff;\n    height: 70%;\n    transform: scale(1);\n    transition: 0.3s;\n    width: 70%;\n    z-index: 1;\n  }\n\n  &:hover {\n    &::before {\n      background-color: rgba(0, 0, 0, 0.1);\n      transform: translate(0%, -50%) rotateY(180deg);\n    }\n\n    & > svg {\n      transform: scale(1.2);\n    }\n  }\n\n  @media (any-hover: none) {\n    &:hover {\n      &::before {\n        background-color: rgba(255, 255, 255, 0.2);\n        transform: translate(-100%, -50%);\n      }\n\n      & > svg {\n        transform: scale(1);\n      }\n    }\n  }\n\n  @media (min-width: 330px) {\n    margin: 5px;\n  }\n\n  @media (min-width: 600px) {\n    margin: 7px;\n  }\n\n  @media (min-width: 1025px) {\n    margin: 10px;\n  }\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  background: ', ';\n'], ['\n  background: ', ';\n']);
 
@@ -34,5 +35,15 @@ var _emotion = require('emotion');
 
+var styles = (0, _emotion.css)(_templateObject);
+
+var dynamicStyles = function dynamicStyles(props) {
+  return (0, _emotion.css)(_templateObject2, _colors2.default[props.network]);
+};
+
 var ShareButtonCircle = function ShareButtonCircle(props) {
+  var className = props.className;
+
+  var dynamicStylesStr = dynamicStyles(props);
+
   return _react2.default.createElement(_ShareButton2.default, _extends({
-    className: (0, _emotion.css)(_templateObject, _colors2.default[props.network])
+    className: (0, _emotion.cx)(styles, dynamicStylesStr, className)
   }, props));
@@ -42,5 +53,5 @@ };
 ShareButtonCircle.propTypes = {
-  className: _propTypes2.default.string
+  className: _propTypes2.default.any
 };
 
 exports.default = ShareButtonCircle;

dist/styled/ShareButtonIconOnly.js

@@ -9,3 +9,4 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n        align-items: center;\n        background: none;\n        border: 0;\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex;\n        height: 44px;\n        justify-content: center;\n        margin: 1px;\n        transition: 0.3s;\n        width: 44px;\n\n        & > svg {\n          fill: ', ';\n          height: 65%;\n          transition: transform 0.3s;\n          width: 65%;\n        }\n\n        &:hover {\n          background: ', ';\n          box-shadow: 0 0 10px ', ';\n\n          & > svg {\n            fill: #fff;\n          }\n        }\n\n        @media (any-hover: none) {\n          &:hover {\n            background: none;\n            box-shadow: none;\n\n            & > svg {\n              fill: ', ';\n            }\n          }\n        }\n\n        @media (min-width: 330px) {\n          margin: 5px;\n        }\n\n        @media (min-width: 600px) {\n          margin: 7px;\n        }\n\n        @media (min-width: 1025px) {\n          margin: 10px;\n        }\n      '], ['\n        align-items: center;\n        background: none;\n        border: 0;\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex;\n        height: 44px;\n        justify-content: center;\n        margin: 1px;\n        transition: 0.3s;\n        width: 44px;\n\n        & > svg {\n          fill: ', ';\n          height: 65%;\n          transition: transform 0.3s;\n          width: 65%;\n        }\n\n        &:hover {\n          background: ', ';\n          box-shadow: 0 0 10px ', ';\n\n          & > svg {\n            fill: #fff;\n          }\n        }\n\n        @media (any-hover: none) {\n          &:hover {\n            background: none;\n            box-shadow: none;\n\n            & > svg {\n              fill: ', ';\n            }\n          }\n        }\n\n        @media (min-width: 330px) {\n          margin: 5px;\n        }\n\n        @media (min-width: 600px) {\n          margin: 7px;\n        }\n\n        @media (min-width: 1025px) {\n          margin: 10px;\n        }\n      ']);
+var _templateObject = _taggedTemplateLiteral(['\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  height: 44px;\n  justify-content: center;\n  margin: 1px;\n  transition: 0.3s;\n  width: 44px;\n\n  & > svg {\n    height: 65%;\n    transition: transform 0.3s;\n    width: 65%;\n  }\n\n  &:hover > svg {\n    fill: #fff;\n  }\n\n  @media (any-hover: none) {\n    &:hover {\n      background: none;\n      box-shadow: none;\n    }\n  }\n\n  @media (min-width: 330px) {\n    margin: 5px;\n  }\n\n  @media (min-width: 600px) {\n    margin: 7px;\n  }\n\n  @media (min-width: 1025px) {\n    margin: 10px;\n  }\n'], ['\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  height: 44px;\n  justify-content: center;\n  margin: 1px;\n  transition: 0.3s;\n  width: 44px;\n\n  & > svg {\n    height: 65%;\n    transition: transform 0.3s;\n    width: 65%;\n  }\n\n  &:hover > svg {\n    fill: #fff;\n  }\n\n  @media (any-hover: none) {\n    &:hover {\n      background: none;\n      box-shadow: none;\n    }\n  }\n\n  @media (min-width: 330px) {\n    margin: 5px;\n  }\n\n  @media (min-width: 600px) {\n    margin: 7px;\n  }\n\n  @media (min-width: 1025px) {\n    margin: 10px;\n  }\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  & > svg {\n    fill: ', ';\n  }\n\n  &:hover {\n    background: ', ';\n    box-shadow: 0 0 10px ', ';\n  }\n\n  @media (any-hover: none) {\n    &:hover > svg {\n      fill: ', ';\n    }\n  }\n'], ['\n  & > svg {\n    fill: ', ';\n  }\n\n  &:hover {\n    background: ', ';\n    box-shadow: 0 0 10px ', ';\n  }\n\n  @media (any-hover: none) {\n    &:hover > svg {\n      fill: ', ';\n    }\n  }\n']);
 
@@ -34,5 +35,15 @@ var _emotion = require('emotion');
 
+var styles = (0, _emotion.css)(_templateObject);
+
+var dynamicStyles = function dynamicStyles(props) {
+  return (0, _emotion.css)(_templateObject2, _colors2.default[props.network], _colors2.default[props.network], _colors2.default[props.network], _colors2.default[props.network]);
+};
+
 var ShareButtonIconOnly = function ShareButtonIconOnly(props) {
+  var className = props.className;
+
+  var dynamicStylesStr = dynamicStyles(props);
+
   return _react2.default.createElement(_ShareButton2.default, _extends({
-    className: (0, _emotion.css)(_templateObject, _colors2.default[props.network], _colors2.default[props.network], _colors2.default[props.network], _colors2.default[props.network])
+    className: (0, _emotion.cx)(styles, dynamicStylesStr, className)
   }, props));
@@ -42,8 +53,5 @@ };
 ShareButtonIconOnly.propTypes = {
-  network: _propTypes2.default.string.isRequired,
-  url: _propTypes2.default.string.isRequired,
-  children: _propTypes2.default.node.isRequired,
-  text: _propTypes2.default.string
+  className: _propTypes2.default.any
 };
 
 exports.default = ShareButtonIconOnly;

dist/styled/ShareButtonOutline.js

@@ -9,3 +9,4 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n        align-items: center;\n        background: none;\n        border: 0;\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex;\n        height: 44px;\n        justify-content: center;\n        margin: 3px;\n        transition: 0.3s;\n        width: 44px;\n\n        & > svg {\n          fill: white;\n          filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));\n          height: 80%;\n          transition: 0.3s;\n          width: 80%;\n        }\n\n        &:hover > svg {\n          fill: ', ';\n          filter: none;\n        }\n\n        @media (any-hover: none) {\n          &:hover > svg {\n            fill: white;\n            filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));\n          }\n        }\n\n        @media (min-width: 330px) {\n          margin: 5px;\n        }\n\n        @media (min-width: 600px) {\n          margin: 7px;\n        }\n\n        @media (min-width: 1025px) {\n          margin: 10px;\n        }\n      '], ['\n        align-items: center;\n        background: none;\n        border: 0;\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex;\n        height: 44px;\n        justify-content: center;\n        margin: 3px;\n        transition: 0.3s;\n        width: 44px;\n\n        & > svg {\n          fill: white;\n          filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));\n          height: 80%;\n          transition: 0.3s;\n          width: 80%;\n        }\n\n        &:hover > svg {\n          fill: ', ';\n          filter: none;\n        }\n\n        @media (any-hover: none) {\n          &:hover > svg {\n            fill: white;\n            filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));\n          }\n        }\n\n        @media (min-width: 330px) {\n          margin: 5px;\n        }\n\n        @media (min-width: 600px) {\n          margin: 7px;\n        }\n\n        @media (min-width: 1025px) {\n          margin: 10px;\n        }\n      ']);
+var _templateObject = _taggedTemplateLiteral(['\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  height: 44px;\n  justify-content: center;\n  margin: 3px;\n  transition: 0.3s;\n  width: 44px;\n\n  & > svg {\n    fill: white;\n    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));\n    height: 80%;\n    transition: 0.3s;\n    width: 80%;\n  }\n\n  @media (any-hover: none) {\n    &:hover > svg {\n      fill: white;\n      filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));\n    }\n  }\n\n  @media (min-width: 330px) {\n    margin: 5px;\n  }\n\n  @media (min-width: 600px) {\n    margin: 7px;\n  }\n\n  @media (min-width: 1025px) {\n    margin: 10px;\n  }\n'], ['\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  height: 44px;\n  justify-content: center;\n  margin: 3px;\n  transition: 0.3s;\n  width: 44px;\n\n  & > svg {\n    fill: white;\n    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));\n    height: 80%;\n    transition: 0.3s;\n    width: 80%;\n  }\n\n  @media (any-hover: none) {\n    &:hover > svg {\n      fill: white;\n      filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));\n    }\n  }\n\n  @media (min-width: 330px) {\n    margin: 5px;\n  }\n\n  @media (min-width: 600px) {\n    margin: 7px;\n  }\n\n  @media (min-width: 1025px) {\n    margin: 10px;\n  }\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  &:hover > svg {\n    fill: ', ';\n    filter: none;\n  }\n'], ['\n  &:hover > svg {\n    fill: ', ';\n    filter: none;\n  }\n']);
 
@@ -34,5 +35,15 @@ var _emotion = require('emotion');
 
+var styles = (0, _emotion.css)(_templateObject);
+
+var dynamicStyles = function dynamicStyles(props) {
+  return (0, _emotion.css)(_templateObject2, _colors2.default[props.network]);
+};
+
 var ShareButtonOutline = function ShareButtonOutline(props) {
+  var className = props.className;
+
+  var dynamicStylesStr = dynamicStyles(props);
+
   return _react2.default.createElement(_ShareButton2.default, _extends({
-    className: (0, _emotion.css)(_templateObject, _colors2.default[props.network])
+    className: (0, _emotion.cx)(styles, dynamicStylesStr, className)
   }, props));
@@ -42,8 +53,5 @@ };
 ShareButtonOutline.propTypes = {
-  network: _propTypes2.default.string.isRequired,
-  url: _propTypes2.default.string.isRequired,
-  children: _propTypes2.default.node.isRequired,
-  text: _propTypes2.default.string
+  className: _propTypes2.default.any
 };
 
 exports.default = ShareButtonOutline;

dist/styled/ShareButtonRectangle.js

@@ -9,3 +9,4 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n        align-items: center;\n        background: ', ';\n        border: 0;\n        color: #666;\n        cursor: pointer;\n        display: flex;\n        flex-basis: 44px;\n        flex-grow: 1;\n        justify-content: center;\n        min-height: 44px;\n        overflow: hidden;\n        transform: scale(1);\n\n        & > svg {\n          fill: #fff;\n          height: 24px;\n          transform: scale(1);\n          transition: 0.3s;\n          width: 24px;\n        }\n\n        &:hover > svg {\n          transform: rotate(-5deg) scale(3);\n        }\n\n        @media (any-hover: none) {\n          &:hover > svg {\n            transform: rotate(0) scale(1);\n          }\n        }\n      '], ['\n        align-items: center;\n        background: ', ';\n        border: 0;\n        color: #666;\n        cursor: pointer;\n        display: flex;\n        flex-basis: 44px;\n        flex-grow: 1;\n        justify-content: center;\n        min-height: 44px;\n        overflow: hidden;\n        transform: scale(1);\n\n        & > svg {\n          fill: #fff;\n          height: 24px;\n          transform: scale(1);\n          transition: 0.3s;\n          width: 24px;\n        }\n\n        &:hover > svg {\n          transform: rotate(-5deg) scale(3);\n        }\n\n        @media (any-hover: none) {\n          &:hover > svg {\n            transform: rotate(0) scale(1);\n          }\n        }\n      ']);
+var _templateObject = _taggedTemplateLiteral(['\n  align-items: center;\n  border: 0;\n  color: #666;\n  cursor: pointer;\n  display: flex;\n  flex-basis: 44px;\n  flex-grow: 1;\n  justify-content: center;\n  min-height: 44px;\n  overflow: hidden;\n  transform: scale(1);\n\n  & > svg {\n    fill: #fff;\n    height: 24px;\n    transform: scale(1);\n    transition: 0.3s;\n    width: 24px;\n  }\n\n  &:hover > svg {\n    transform: rotate(-5deg) scale(3);\n  }\n\n  @media (any-hover: none) {\n    &:hover > svg {\n      transform: rotate(0) scale(1);\n    }\n  }\n'], ['\n  align-items: center;\n  border: 0;\n  color: #666;\n  cursor: pointer;\n  display: flex;\n  flex-basis: 44px;\n  flex-grow: 1;\n  justify-content: center;\n  min-height: 44px;\n  overflow: hidden;\n  transform: scale(1);\n\n  & > svg {\n    fill: #fff;\n    height: 24px;\n    transform: scale(1);\n    transition: 0.3s;\n    width: 24px;\n  }\n\n  &:hover > svg {\n    transform: rotate(-5deg) scale(3);\n  }\n\n  @media (any-hover: none) {\n    &:hover > svg {\n      transform: rotate(0) scale(1);\n    }\n  }\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  background: ', ';\n'], ['\n  background: ', ';\n']);
 
@@ -34,5 +35,15 @@ var _emotion = require('emotion');
 
+var styles = (0, _emotion.css)(_templateObject);
+
+var dynamicStyles = function dynamicStyles(props) {
+  return (0, _emotion.css)(_templateObject2, _colors2.default[props.network]);
+};
+
 var ShareButtonRectangle = function ShareButtonRectangle(props) {
+  var className = props.className;
+
+  var dynamicStylesStr = dynamicStyles(props);
+
   return _react2.default.createElement(_ShareButton2.default, _extends({
-    className: (0, _emotion.css)(_templateObject, _colors2.default[props.network])
+    className: (0, _emotion.cx)(styles, dynamicStylesStr, className)
   }, props));
@@ -42,8 +53,5 @@ };
 ShareButtonRectangle.propTypes = {
-  network: _propTypes2.default.string.isRequired,
-  url: _propTypes2.default.string.isRequired,
-  children: _propTypes2.default.node.isRequired,
-  text: _propTypes2.default.string
+  className: _propTypes2.default.any
 };
 
 exports.default = ShareButtonRectangle;

dist/styled/ShareButtonRoundSquare.js

@@ -9,3 +9,4 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n        align-items: center;\n        background: ', ';\n        border: 0;\n        border-radius: 8%;\n        cursor: pointer;\n        display: flex;\n        height: 44px;\n        justify-content: center;\n        margin: 3px;\n        transition: 0.3s;\n        width: 44px;\n\n        & > svg {\n          fill: #fff;\n          height: 50%;\n          transform: rotate(0) scale(1);\n          transition: 0.5s;\n          width: 50%;\n        }\n\n        &:hover > svg {\n          filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1));\n          transform: rotate(360deg) scale(1.2);\n        }\n\n        @media (any-hover: none) {\n          &:hover > svg {\n            filter: none;\n            transform: rotate(0) scale(1);\n          }\n        }\n\n        @media (min-width: 330px) {\n          margin: 5px;\n        }\n\n        @media (min-width: 600px) {\n          margin: 7px;\n        }\n\n        @media (min-width: 1025px) {\n          margin: 10px;\n        }\n      '], ['\n        align-items: center;\n        background: ', ';\n        border: 0;\n        border-radius: 8%;\n        cursor: pointer;\n        display: flex;\n        height: 44px;\n        justify-content: center;\n        margin: 3px;\n        transition: 0.3s;\n        width: 44px;\n\n        & > svg {\n          fill: #fff;\n          height: 50%;\n          transform: rotate(0) scale(1);\n          transition: 0.5s;\n          width: 50%;\n        }\n\n        &:hover > svg {\n          filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1));\n          transform: rotate(360deg) scale(1.2);\n        }\n\n        @media (any-hover: none) {\n          &:hover > svg {\n            filter: none;\n            transform: rotate(0) scale(1);\n          }\n        }\n\n        @media (min-width: 330px) {\n          margin: 5px;\n        }\n\n        @media (min-width: 600px) {\n          margin: 7px;\n        }\n\n        @media (min-width: 1025px) {\n          margin: 10px;\n        }\n      ']);
+var _templateObject = _taggedTemplateLiteral(['\n  align-items: center;\n  border: 0;\n  border-radius: 8%;\n  cursor: pointer;\n  display: flex;\n  height: 44px;\n  justify-content: center;\n  margin: 3px;\n  transition: 0.3s;\n  width: 44px;\n\n  & > svg {\n    fill: #fff;\n    height: 50%;\n    transform: rotate(0) scale(1);\n    transition: 0.5s;\n    width: 50%;\n  }\n\n  &:hover > svg {\n    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1));\n    transform: rotate(360deg) scale(1.2);\n  }\n\n  @media (any-hover: none) {\n    &:hover > svg {\n      filter: none;\n      transform: rotate(0) scale(1);\n    }\n  }\n\n  @media (min-width: 330px) {\n    margin: 5px;\n  }\n\n  @media (min-width: 600px) {\n    margin: 7px;\n  }\n\n  @media (min-width: 1025px) {\n    margin: 10px;\n  }\n'], ['\n  align-items: center;\n  border: 0;\n  border-radius: 8%;\n  cursor: pointer;\n  display: flex;\n  height: 44px;\n  justify-content: center;\n  margin: 3px;\n  transition: 0.3s;\n  width: 44px;\n\n  & > svg {\n    fill: #fff;\n    height: 50%;\n    transform: rotate(0) scale(1);\n    transition: 0.5s;\n    width: 50%;\n  }\n\n  &:hover > svg {\n    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1));\n    transform: rotate(360deg) scale(1.2);\n  }\n\n  @media (any-hover: none) {\n    &:hover > svg {\n      filter: none;\n      transform: rotate(0) scale(1);\n    }\n  }\n\n  @media (min-width: 330px) {\n    margin: 5px;\n  }\n\n  @media (min-width: 600px) {\n    margin: 7px;\n  }\n\n  @media (min-width: 1025px) {\n    margin: 10px;\n  }\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  background: ', ';\n'], ['\n  background: ', ';\n']);
 
@@ -34,5 +35,15 @@ var _emotion = require('emotion');
 
+var styles = (0, _emotion.css)(_templateObject);
+
+var dynamicStyles = function dynamicStyles(props) {
+  return (0, _emotion.css)(_templateObject2, _colors2.default[props.network]);
+};
+
 var ShareButtonRoundSquare = function ShareButtonRoundSquare(props) {
+  var className = props.className;
+
+  var dynamicStylesStr = dynamicStyles(props);
+
   return _react2.default.createElement(_ShareButton2.default, _extends({
-    className: (0, _emotion.css)(_templateObject, _colors2.default[props.network])
+    className: (0, _emotion.cx)(styles, dynamicStylesStr, className)
   }, props));
@@ -42,8 +53,5 @@ };
 ShareButtonRoundSquare.propTypes = {
-  network: _propTypes2.default.string.isRequired,
-  url: _propTypes2.default.string.isRequired,
-  children: _propTypes2.default.node.isRequired,
-  text: _propTypes2.default.string
+  className: _propTypes2.default.any
 };
 
 exports.default = ShareButtonRoundSquare;

package.json

 {
   "name": "react-custom-share",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "Social sharing buttons for React",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -27,4 +27,4 @@ # react-custom-share
 * [Usage](#usage)
-* [Demo](#demo)
 * [API](#api)
+* [Repository](#repository)
 * [License](#license)
@@ -122,29 +122,2 @@
 
-## Demo
-
-[View demo](https://greglobinski.github.io/react-custom-share/)
-
-#### Run demo on localhost
-
-Clone `react-custom-share` package.
-
-```
-git clone https://github.com/greglobinski/react-custom-share.git
-```
-
-Move into newly created folder and install dependencies.
-
-```
-cd react-custom-share
-yarn install
-```
-
-After installation run the `develop` npm script.
-
-```
-yarn develop
-```
-
-Open the `http://localhost:3001/` address in your browser.
-
 ## API
@@ -248,5 +221,31 @@
 
+## Repository
+
+To run [demo](https://greglobinski.github.io/react-custom-share/) on localhost
+
+**1.** Clone `react-custom-share` package.
+
+```
+git clone https://github.com/greglobinski/react-custom-share.git
+```
+
+**2.** Move into newly created folder and install dependencies.
+
+```
+cd react-custom-share
+yarn install
+```
+
+**3.** After installation run the `develop` npm script.
+
+```
+yarn develop
+```
+
+**4.** Open the `http://localhost:3001/` address in your browser.
+
 ## License
 
 The MIT License (MIT)
+
 Copyright (c) 2018 greg lobinski
@@ -253,0 +252,0 @@

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Lines of code

541

increased by4.44%

Worsened metrics

Total package byte prevSize

46302

decreased by-2.99%

Number of lines in readme file

284

decreased by-0.35%

No dependency changes