react-text-typing 0.0.2 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +21 -1
  2. package/dist/TextTyping.js +52 -16
  3. package/dist/TextTyping.test.js +89 -0
  4. package/dist/index.d.ts +13 -0
  5. package/package.json +45 -7
package/README.md CHANGED
@@ -1,6 +1,14 @@
1
1
  # React text Typing
2
2
 
3
- [![npm version](https://badge.fury.io/js/react-text-typing.svg)](https://www.npmjs.com/package/react-text-typing) • [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)]
3
+
4
+ [![CircleCI](https://circleci.com/gh/Oda2/react-text-typing.svg?style=shield)](https://circleci.com/gh/Oda2/react-text-typing)
5
+ [![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)
6
+ [![npm version](https://badge.fury.io/js/react-text-typing.svg)](https://badge.fury.io/js/react-text-typing)
7
+ [![GitHub license](https://img.shields.io/github/license/Oda2/react-text-typing)](https://github.com/Oda2/react-text-typing/blob/master/LICENSE)
8
+ [![GitHub issues](https://img.shields.io/github/issues/Oda2/react-text-typing)](https://github.com/Oda2/react-text-typing/issues)
9
+ [![GitHub stars](https://img.shields.io/github/stars/Oda2/react-text-typing)](https://github.com/Oda2/react-text-typing/stargazers)
10
+ [![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)
11
+ [![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)
4
12
 
5
13
  ## Installation
6
14
 
@@ -32,3 +40,15 @@ const App = () => (
32
40
 
33
41
  ReactDOM.render(<App />, document.getElementById('root'));
34
42
  ```
43
+
44
+ ## NPM Statistics
45
+
46
+ Download stats for this NPM package
47
+
48
+ [![NPM](https://nodei.co/npm/react-text-typing.png)](https://nodei.co/npm/react-text-typing/)
49
+
50
+
51
+ ## License
52
+ Licensed under [MIT](https://github.com/Oda2/react-text-typing/blob/master/LICENSE)
53
+
54
+ [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FOda2%2Freact-text-typing.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2FOda2%2Freact-text-typing?ref=badge_large)
package/dist/TextTyping.js CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
@@ -9,31 +11,60 @@ exports.default = void 0;
9
11
 
10
12
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
13
 
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+
12
16
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
17
 
14
18
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
15
19
 
16
- var _react = _interopRequireDefault(require("react"));
20
+ var _react = _interopRequireWildcard(require("react"));
17
21
 
18
22
  var _propTypes = _interopRequireDefault(require("prop-types"));
19
23
 
20
24
  var _reactJss = require("react-jss");
21
25
 
22
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
26
+ var _excluded = ["text", "showBlink", "speed", "component"];
27
+
28
+ 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); }
29
+
30
+ 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; }
23
31
 
24
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
32
+ 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; }
33
+
34
+ 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; }
25
35
 
26
36
  var TextTyping = function TextTyping(_ref) {
27
37
  var text = _ref.text,
28
38
  showBlink = _ref.showBlink,
29
- _ref$component = _ref.component,
30
- Component = _ref$component === void 0 ? 'h1' : _ref$component,
31
- props = (0, _objectWithoutProperties2.default)(_ref, ["text", "showBlink", "component"]);
39
+ speed = _ref.speed,
40
+ Component = _ref.component,
41
+ props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
32
42
  var classes = useStyles(_objectSpread({}, props));
33
- return _react.default.createElement(Component, (0, _extends2.default)({
43
+
44
+ var _useState = (0, _react.useState)(''),
45
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
46
+ internalText = _useState2[0],
47
+ setInternalText = _useState2[1];
48
+
49
+ var timer = (0, _react.useRef)(null);
50
+ (0, _react.useEffect)(function () {
51
+ var typing = text.split('');
52
+ timer.current = setInterval(function () {
53
+ if (typing.length > 0) {
54
+ var next = typing.shift();
55
+ setInternalText(function (value) {
56
+ return value + next;
57
+ });
58
+ } else {
59
+ clearInterval(timer.current);
60
+ }
61
+ }, speed);
62
+ return function () {};
63
+ }, [text]);
64
+ return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
34
65
  className: "".concat(classes.text, " ").concat(showBlink ? classes.blink : ''),
35
- "data-text": text
36
- }, props), text);
66
+ "data-text": internalText
67
+ }, props), internalText);
37
68
  };
38
69
 
39
70
  var useStyles = (0, _reactJss.createUseStyles)({
@@ -81,25 +112,30 @@ var useStyles = (0, _reactJss.createUseStyles)({
81
112
  }
82
113
  });
83
114
  TextTyping.propTypes = {
84
- /** */
115
+ /** Text to be demonstrated in the component */
85
116
  text: _propTypes.default.string.isRequired,
86
117
 
87
- /** */
118
+ /** Component to be used internally in the component */
88
119
  component: _propTypes.default.elementType,
89
120
 
90
- /** */
121
+ /** Text color */
91
122
  colorText: _propTypes.default.string,
92
123
 
93
- /** */
124
+ /** Background fill color */
94
125
  colorTyping: _propTypes.default.string,
95
126
 
96
- /** */
97
- showBlink: _propTypes.default.bool
127
+ /** Show flashing text icon */
128
+ showBlink: _propTypes.default.bool,
129
+
130
+ /** Text speed appearing */
131
+ speed: _propTypes.default.number
98
132
  };
99
133
  TextTyping.defaultProps = {
134
+ component: 'h1',
100
135
  showBlink: true,
101
136
  colorText: '#FFF',
102
- colorTyping: '#0075D7'
137
+ colorTyping: '#0075D7',
138
+ speed: 500
103
139
  };
104
140
  var _default = TextTyping;
105
141
  exports.default = _default;
package/dist/TextTyping.test.js ADDED
@@ -0,0 +1,89 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
6
+
7
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
8
+
9
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
10
+
11
+ var _react = _interopRequireDefault(require("react"));
12
+
13
+ var _react2 = require("@testing-library/react");
14
+
15
+ var _TextTyping = _interopRequireDefault(require("./TextTyping"));
16
+
17
+ 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; }
18
+
19
+ 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; }
20
+
21
+ describe('TextTyping Component', function () {
22
+ it('should render component', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
23
+ var text;
24
+ return _regenerator.default.wrap(function _callee$(_context) {
25
+ while (1) {
26
+ switch (_context.prev = _context.next) {
27
+ case 0:
28
+ text = 'rice';
29
+ createComponent({
30
+ text: text
31
+ });
32
+ _context.next = 4;
33
+ return (0, _react2.waitFor)(function () {
34
+ return _react2.screen.getByText(text);
35
+ });
36
+
37
+ case 4:
38
+ expect(_react2.screen.getByText(text)).toBeDefined();
39
+
40
+ case 5:
41
+ case "end":
42
+ return _context.stop();
43
+ }
44
+ }
45
+ }, _callee);
46
+ })));
47
+ it('should render component with not show blink', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
48
+ var text;
49
+ return _regenerator.default.wrap(function _callee2$(_context2) {
50
+ while (1) {
51
+ switch (_context2.prev = _context2.next) {
52
+ case 0:
53
+ text = 'rice';
54
+ createComponent({
55
+ showBlink: false,
56
+ text: text
57
+ });
58
+ _context2.next = 4;
59
+ return (0, _react2.waitFor)(function () {
60
+ return _react2.screen.getByText(text);
61
+ });
62
+
63
+ case 4:
64
+ expect(_react2.screen.getByText(text)).toBeDefined();
65
+
66
+ case 5:
67
+ case "end":
68
+ return _context2.stop();
69
+ }
70
+ }
71
+ }, _callee2);
72
+ })));
73
+ });
74
+
75
+ function createComponent() {
76
+ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
77
+
78
+ var defaultProps = _objectSpread({
79
+ text: 'Example',
80
+ showBlink: true,
81
+ colorText: '#FFF',
82
+ colorTyping: '#0075D7',
83
+ speed: 1
84
+ }, props);
85
+
86
+ return (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_TextTyping.default, defaultProps));
87
+ }
88
+
89
+ ;
package/dist/index.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import * as React from 'react';
2
+
3
+ export interface ReactTextTypingProps {
4
+ text: React.string;
5
+ component?: React.ElementType = 'h1';
6
+ colorText?: string = '#FFF';
7
+ colorTyping?: string = '#0075D7';
8
+ showBlink?: boolean = true;
9
+ }
10
+
11
+ export default class ReactTextTyping extends React.Component<
12
+ ReactTextTypingProps
13
+ > {}
package/package.json CHANGED
@@ -1,26 +1,51 @@
1
1
  {
2
2
  "name": "react-text-typing",
3
- "version": "0.0.2",
3
+ "version": "0.1.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
+ "types": "dist/index.d.ts",
7
+ "homepage": "https://renato-oda2.gitbook.io/react-text-typing",
6
8
  "license": "MIT",
7
9
  "author": {
8
10
  "name": "Renato Oda",
9
11
  "email": "renato.oda2@gmail.com"
10
12
  },
13
+ "repository": {
14
+ "type": "git",
15
+ "url": "git++https://github.com/Oda2/react-text-typing"
16
+ },
17
+ "keywords": [
18
+ "react",
19
+ "library"
20
+ ],
21
+ "bugs": {
22
+ "url": "https://github.com/oda2/react-text-typing/issues"
23
+ },
11
24
  "files": [
12
25
  "dist"
13
26
  ],
14
27
  "scripts": {
15
28
  "start": "react-dependency-scripts start",
16
29
  "build": "react-dependency-scripts build",
17
- "test": "react-dependency-scripts test"
30
+ "lint": "eslint .",
31
+ "test": "react-dependency-scripts test",
32
+ "coverage": "yarn test --coverage",
33
+ "coveralls": "cat ./coverage/lcov.info | ./node_modules/.bin/coveralls",
34
+ "cypress": "$(yarn bin)/cypress"
18
35
  },
19
36
  "devDependencies": {
20
- "prop-types": "^15.7.2",
21
- "react": "^16.12.0",
22
- "react-dependency-scripts": "^0.5.0",
23
- "react-dom": "^16.12.0"
37
+ "@babel/eslint-parser": "^7.17.0",
38
+ "@testing-library/jest-dom": "^5.16.4",
39
+ "@testing-library/react": "^13.1.1",
40
+ "coveralls": "^3.1.1",
41
+ "cypress": "^9.5.4",
42
+ "eslint": "^8.13.0",
43
+ "eslint-plugin-jsx-a11y": "^6.5.1",
44
+ "eslint-plugin-react": "^7.29.4",
45
+ "prop-types": "^15.8.1",
46
+ "react": "^18.0.0",
47
+ "react-dependency-scripts": "^1.0.6",
48
+ "react-dom": "^18.0.0"
24
49
  },
25
50
  "browserslist": {
26
51
  "production": [
@@ -35,6 +60,19 @@
35
60
  ]
36
61
  },
37
62
  "dependencies": {
38
- "react-jss": "^10.0.4"
63
+ "react-jss": "^10.9.0"
64
+ },
65
+ "jest": {
66
+ "testMatch": [
67
+ "<rootDir>src/lib/**/*.test.js"
68
+ ],
69
+ "coverageThreshold": {
70
+ "global": {
71
+ "branches": 100,
72
+ "functions": 100,
73
+ "lines": 100,
74
+ "statements": 100
75
+ }
76
+ }
39
77
  }
40
78
  }