react-text-typing 0.1.0 → 0.2.0

package/README.md

@@ -1,5 +1,6 @@
-# React text Typing
+# React text typing
 
+> Component that performs the effect of writing
 
 [![CircleCI](https://circleci.com/gh/Oda2/react-text-typing.svg?style=shield)](https://circleci.com/gh/Oda2/react-text-typing)
 [![Coverage Status](https://coveralls.io/repos/github/Oda2/react-text-typing/badge.svg?branch=master)](https://coveralls.io/github/Oda2/react-text-typing?branch=master)
@@ -8,6 +9,7 @@
 [![GitHub issues](https://img.shields.io/github/issues/Oda2/react-text-typing)](https://github.com/Oda2/react-text-typing/issues)
 [![GitHub stars](https://img.shields.io/github/stars/Oda2/react-text-typing)](https://github.com/Oda2/react-text-typing/stargazers)
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FOda2%2Freact-text-typing.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FOda2%2Freact-text-typing?ref=badge_shield)
+[![react-text-typing](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/mp85fc/main&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/mp85fc/runs)
 [![Edit admiring-sun-5qry6](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/admiring-sun-5qry6?fontsize=14&hidenavigation=1&theme=dark)
 
 ## Installation
@@ -21,7 +23,7 @@ $ yarn add react-text-typing
 ```
 
 ## Demo
-![Exemple](./docs/example.gif)
+![Exemple](https://raw.githubusercontent.com/Oda2/react-text-typing/main/docs/example.gif)
 
 ## Examples
 

package/dist/TextTyping.js

@@ -13,25 +13,36 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactJss = require("react-jss");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _excluded = ["text", "showBlink", "speed", "component"];
 
+var _templateObject, _templateObject2, _templateObject3;
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var blinking = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n0% {\n  border-color: transparent;\n};\n  \n50% {\n  border-color: black;\n}\n"])));
+var loading = (0, _styledComponents.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n0% {\n  max-width: 0%;\n}\n"])));
+
+var TextRoot = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\nposition: relative;\ncolor: ", ";\nfont-size: 5em;\nmargin: 0;\npadding: 0;\nborder-right: .1em solid;\nanimation: ", " 0.8s linear infinite;\n\n&::before {\n  content: '", "';\n  position: absolute;\n  overflow: hidden;\n  white-space: nowrap;\n  animation: ", " ", "s steps(80);\n  max-width: 100%;\n  color: ", ";\n}\n"])), function (props) {
+  return props.colorText;
+}, blinking, function (props) {
+  return props.internalText;
+}, loading, function (props) {
+  return props.timeTyping;
+}, function (props) {
+  return props.colorTyping;
+});
 
 var TextTyping = function TextTyping(_ref) {
   var text = _ref.text,
@@ -39,7 +50,6 @@ var TextTyping = function TextTyping(_ref) {
       speed = _ref.speed,
       Component = _ref.component,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = useStyles(_objectSpread({}, props));
 
   var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -61,56 +71,13 @@ var TextTyping = function TextTyping(_ref) {
     }, speed);
     return function () {};
   }, [text]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    className: "".concat(classes.text, " ").concat(showBlink ? classes.blink : ''),
-    "data-text": internalText
+  return /*#__PURE__*/_react.default.createElement(TextRoot, (0, _extends2.default)({
+    as: Component,
+    "data-text": text,
+    internalText: internalText
   }, props), internalText);
 };
 
-var useStyles = (0, _reactJss.createUseStyles)({
-  text: {
-    position: 'relative',
-    color: function color(props) {
-      return props.colorText;
-    },
-    fontSize: '5em',
-    '&:before': {
-      content: 'attr(data-text)',
-      position: 'absolute',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      animation: '$loading 5s steps(80)',
-      maxWidth: '100%',
-      color: function color(props) {
-        return props.colorTyping;
-      }
-    }
-  },
-  '@keyframes typing': {
-    from: {
-      width: 0
-    }
-  },
-  '@keyframes blinking': {
-    '0%': {
-      borderColor: 'transparent'
-    },
-    '50%': {
-      borderColor: 'black'
-    }
-  },
-  '@keyframes loading': {
-    '0%': {
-      maxWidth: 0
-    }
-  },
-  blink: {
-    margin: 0,
-    padding: 0,
-    borderRight: '.1em solid',
-    animation: '$blinking 0.8s linear infinite'
-  }
-});
 TextTyping.propTypes = {
   /** Text to be demonstrated in the component */
   text: _propTypes.default.string.isRequired,
@@ -128,14 +95,18 @@ TextTyping.propTypes = {
   showBlink: _propTypes.default.bool,
 
   /** Text speed appearing */
-  speed: _propTypes.default.number
+  speed: _propTypes.default.number,
+
+  /** Time typing in animation */
+  timeTyping: _propTypes.default.number
 };
 TextTyping.defaultProps = {
   component: 'h1',
   showBlink: true,
   colorText: '#FFF',
   colorTyping: '#0075D7',
-  speed: 500
+  speed: 500,
+  timeTyping: 10
 };
 var _default = TextTyping;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-text-typing",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,7 +16,8 @@
   },
   "keywords": [
     "react",
-    "library"
+    "library",
+    "styled-components"
   ],
   "bugs": {
     "url": "https://github.com/oda2/react-text-typing/issues"
@@ -34,18 +35,18 @@
     "cypress": "$(yarn bin)/cypress"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.17.0",
+    "@babel/eslint-parser": "^7.18.2",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.1.1",
+    "@testing-library/react": "^13.3.0",
     "coveralls": "^3.1.1",
-    "cypress": "^9.5.4",
-    "eslint": "^8.13.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.29.4",
+    "cypress": "^10.3.0",
+    "eslint": "^8.19.0",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-react": "^7.30.1",
     "prop-types": "^15.8.1",
-    "react": "^18.0.0",
+    "react": "^18.2.0",
     "react-dependency-scripts": "^1.0.6",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.2.0"
   },
   "browserslist": {
     "production": [
@@ -60,7 +61,7 @@
     ]
   },
   "dependencies": {
-    "react-jss": "^10.9.0"
+    "styled-components": "^5.3.5"
   },
   "jest": {
     "testMatch": [