react-text-typing 0.0.3 → 0.2.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.
- package/README.md +4 -4
- package/dist/TextTyping.js +112 -0
- package/dist/TextTyping.test.js +89 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +15 -0
- package/package.json +43 -14
package/README.md
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
# React text
|
|
1
|
+
# React text typing
|
|
2
2
|
|
|
3
|
+
> Component that performs the effect of writing
|
|
3
4
|
|
|
4
5
|
[](https://circleci.com/gh/Oda2/react-text-typing)
|
|
5
6
|
[](https://coveralls.io/github/Oda2/react-text-typing?branch=master)
|
|
@@ -8,8 +9,7 @@
|
|
|
8
9
|
[](https://github.com/Oda2/react-text-typing/issues)
|
|
9
10
|
[](https://github.com/Oda2/react-text-typing/stargazers)
|
|
10
11
|
[](https://app.fossa.com/projects/git%2Bgithub.com%2FOda2%2Freact-text-typing?ref=badge_shield)
|
|
11
|
-
[](https://dashboard.cypress.io/projects/mp85fc/runs)
|
|
13
13
|
[](https://codesandbox.io/s/admiring-sun-5qry6?fontsize=14&hidenavigation=1&theme=dark)
|
|
14
14
|
|
|
15
15
|
## Installation
|
|
@@ -23,7 +23,7 @@ $ yarn add react-text-typing
|
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
## Demo
|
|
26
|
-
|
|
27
27
|
|
|
28
28
|
## Examples
|
|
29
29
|
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
17
|
+
|
|
18
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
19
|
+
|
|
20
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
+
|
|
22
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
23
|
+
|
|
24
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
25
|
+
|
|
26
|
+
var _excluded = ["text", "showBlink", "speed", "component"];
|
|
27
|
+
|
|
28
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
29
|
+
|
|
30
|
+
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); }
|
|
31
|
+
|
|
32
|
+
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; }
|
|
33
|
+
|
|
34
|
+
var blinking = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n0% {\n border-color: transparent;\n};\n \n50% {\n border-color: black;\n}\n"])));
|
|
35
|
+
var loading = (0, _styledComponents.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n0% {\n max-width: 0%;\n}\n"])));
|
|
36
|
+
|
|
37
|
+
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) {
|
|
38
|
+
return props.colorText;
|
|
39
|
+
}, blinking, function (props) {
|
|
40
|
+
return props.internalText;
|
|
41
|
+
}, loading, function (props) {
|
|
42
|
+
return props.timeTyping;
|
|
43
|
+
}, function (props) {
|
|
44
|
+
return props.colorTyping;
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
var TextTyping = function TextTyping(_ref) {
|
|
48
|
+
var text = _ref.text,
|
|
49
|
+
showBlink = _ref.showBlink,
|
|
50
|
+
speed = _ref.speed,
|
|
51
|
+
Component = _ref.component,
|
|
52
|
+
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
53
|
+
|
|
54
|
+
var _useState = (0, _react.useState)(''),
|
|
55
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
56
|
+
internalText = _useState2[0],
|
|
57
|
+
setInternalText = _useState2[1];
|
|
58
|
+
|
|
59
|
+
var timer = (0, _react.useRef)(null);
|
|
60
|
+
(0, _react.useEffect)(function () {
|
|
61
|
+
var typing = text.split('');
|
|
62
|
+
timer.current = setInterval(function () {
|
|
63
|
+
if (typing.length > 0) {
|
|
64
|
+
var next = typing.shift();
|
|
65
|
+
setInternalText(function (value) {
|
|
66
|
+
return value + next;
|
|
67
|
+
});
|
|
68
|
+
} else {
|
|
69
|
+
clearInterval(timer.current);
|
|
70
|
+
}
|
|
71
|
+
}, speed);
|
|
72
|
+
return function () {};
|
|
73
|
+
}, [text]);
|
|
74
|
+
return /*#__PURE__*/_react.default.createElement(TextRoot, (0, _extends2.default)({
|
|
75
|
+
as: Component,
|
|
76
|
+
"data-text": text,
|
|
77
|
+
internalText: internalText
|
|
78
|
+
}, props), internalText);
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
TextTyping.propTypes = {
|
|
82
|
+
/** Text to be demonstrated in the component */
|
|
83
|
+
text: _propTypes.default.string.isRequired,
|
|
84
|
+
|
|
85
|
+
/** Component to be used internally in the component */
|
|
86
|
+
component: _propTypes.default.elementType,
|
|
87
|
+
|
|
88
|
+
/** Text color */
|
|
89
|
+
colorText: _propTypes.default.string,
|
|
90
|
+
|
|
91
|
+
/** Background fill color */
|
|
92
|
+
colorTyping: _propTypes.default.string,
|
|
93
|
+
|
|
94
|
+
/** Show flashing text icon */
|
|
95
|
+
showBlink: _propTypes.default.bool,
|
|
96
|
+
|
|
97
|
+
/** Text speed appearing */
|
|
98
|
+
speed: _propTypes.default.number,
|
|
99
|
+
|
|
100
|
+
/** Time typing in animation */
|
|
101
|
+
timeTyping: _propTypes.default.number
|
|
102
|
+
};
|
|
103
|
+
TextTyping.defaultProps = {
|
|
104
|
+
component: 'h1',
|
|
105
|
+
showBlink: true,
|
|
106
|
+
colorText: '#FFF',
|
|
107
|
+
colorTyping: '#0075D7',
|
|
108
|
+
speed: 500,
|
|
109
|
+
timeTyping: 10
|
|
110
|
+
};
|
|
111
|
+
var _default = TextTyping;
|
|
112
|
+
exports.default = _default;
|
|
@@ -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/dist/index.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "default", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _TextTyping.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
var _TextTyping = _interopRequireDefault(require("./TextTyping"));
|
package/package.json
CHANGED
|
@@ -1,13 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-text-typing",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.2.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
|
+
"styled-components"
|
|
21
|
+
],
|
|
22
|
+
"bugs": {
|
|
23
|
+
"url": "https://github.com/oda2/react-text-typing/issues"
|
|
24
|
+
},
|
|
11
25
|
"files": [
|
|
12
26
|
"dist"
|
|
13
27
|
],
|
|
@@ -17,20 +31,22 @@
|
|
|
17
31
|
"lint": "eslint .",
|
|
18
32
|
"test": "react-dependency-scripts test",
|
|
19
33
|
"coverage": "yarn test --coverage",
|
|
20
|
-
"coveralls": "cat ./coverage/lcov.info | ./node_modules/.bin/coveralls"
|
|
34
|
+
"coveralls": "cat ./coverage/lcov.info | ./node_modules/.bin/coveralls",
|
|
35
|
+
"cypress": "$(yarn bin)/cypress"
|
|
21
36
|
},
|
|
22
37
|
"devDependencies": {
|
|
23
|
-
"@
|
|
24
|
-
"@testing-library/
|
|
25
|
-
"
|
|
26
|
-
"coveralls": "^3.
|
|
27
|
-
"
|
|
28
|
-
"eslint
|
|
29
|
-
"eslint-plugin-
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"react
|
|
33
|
-
"react-
|
|
38
|
+
"@babel/eslint-parser": "^7.18.2",
|
|
39
|
+
"@testing-library/jest-dom": "^5.16.4",
|
|
40
|
+
"@testing-library/react": "^13.3.0",
|
|
41
|
+
"coveralls": "^3.1.1",
|
|
42
|
+
"cypress": "^10.3.0",
|
|
43
|
+
"eslint": "^8.19.0",
|
|
44
|
+
"eslint-plugin-jsx-a11y": "^6.6.0",
|
|
45
|
+
"eslint-plugin-react": "^7.30.1",
|
|
46
|
+
"prop-types": "^15.8.1",
|
|
47
|
+
"react": "^18.2.0",
|
|
48
|
+
"react-dependency-scripts": "^1.0.6",
|
|
49
|
+
"react-dom": "^18.2.0"
|
|
34
50
|
},
|
|
35
51
|
"browserslist": {
|
|
36
52
|
"production": [
|
|
@@ -45,6 +61,19 @@
|
|
|
45
61
|
]
|
|
46
62
|
},
|
|
47
63
|
"dependencies": {
|
|
48
|
-
"
|
|
64
|
+
"styled-components": "^5.3.5"
|
|
65
|
+
},
|
|
66
|
+
"jest": {
|
|
67
|
+
"testMatch": [
|
|
68
|
+
"<rootDir>src/lib/**/*.test.js"
|
|
69
|
+
],
|
|
70
|
+
"coverageThreshold": {
|
|
71
|
+
"global": {
|
|
72
|
+
"branches": 100,
|
|
73
|
+
"functions": 100,
|
|
74
|
+
"lines": 100,
|
|
75
|
+
"statements": 100
|
|
76
|
+
}
|
|
77
|
+
}
|
|
49
78
|
}
|
|
50
79
|
}
|