diff --git a/README.md b/README.md
index 356c4cd..2505525 100644
--- a/README.md
+++ b/README.md
@@ -69,6 +69,7 @@ Refer to [`examples/`](/examples) for more examples.
## Options
* [`className`](#className)
+* [`component`](#component)
* [`avgTypingDelay`](#avgTypingDelay)
* [`stdTypingDelay`](#stdTypingDelay)
* [`startDelay`](#startDelay)
@@ -93,6 +94,20 @@ have the CSS class `Typist` applied to it.
Animate this text.
```
+
+#### component
+*Default*: `div`
+
+Component tag to be applied to the Typist root node. **(string/React.Element)**
+
+```xml
+ Animate this text.
+```
+ will produce:
+```xml
+ Animate this text.
+```
+
#### avgTypingDelay
*Default*: `70`
@@ -207,14 +222,14 @@ React Typist makes use of Array.from() which is not supported in IE.
`SCRIPT438: Object doesn't support property or method 'from' Typist.js (449,1)`
To resolve this, [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) can be added to your project.
-
+
```shell
npm install --save babel-polyfill
```
-
+
You can now include this module in your app at the entry point.
-ES6:
+ES6:
```js
import 'babel-polyfill'
```
diff --git a/dist/Typist.js b/dist/Typist.js
index bff9629..f67e78d 100644
--- a/dist/Typist.js
+++ b/dist/Typist.js
@@ -214,9 +214,10 @@ module.exports =
var isDone = this.state.isDone;
var innerTree = utils.extractTreeWithText(this.props.children, this.state.text);
+ var WrapComponent = this.props.component;
return _react2.default.createElement(
- 'div',
+ WrapComponent,
{ className: 'Typist ' + className },
innerTree,
_react2.default.createElement(_Cursor2.default, _extends({ isDone: isDone }, cursor))
@@ -229,6 +230,7 @@ module.exports =
Typist.propTypes = {
children: _propTypes2.default.node,
+ component: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.string]),
className: _propTypes2.default.string,
avgTypingDelay: _propTypes2.default.number,
stdTypingDelay: _propTypes2.default.number,
@@ -241,6 +243,7 @@ module.exports =
};
Typist.defaultProps = {
className: '',
+ component: 'div',
avgTypingDelay: 70,
stdTypingDelay: 25,
startDelay: 0,
@@ -943,45 +946,43 @@ module.exports =
var warning = emptyFunction;
if (process.env.NODE_ENV !== 'production') {
- (function () {
- var printWarning = function printWarning(format) {
- for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- args[_key - 1] = arguments[_key];
- }
-
- var argIndex = 0;
- var message = 'Warning: ' + format.replace(/%s/g, function () {
- return args[argIndex++];
- });
- if (typeof console !== 'undefined') {
- console.error(message);
- }
- try {
- // --- Welcome to debugging React ---
- // This error was thrown as a convenience so that you can use this stack
- // to find the callsite that caused this warning to fire.
- throw new Error(message);
- } catch (x) {}
- };
+ var printWarning = function printWarning(format) {
+ for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+ args[_key - 1] = arguments[_key];
+ }
- warning = function warning(condition, format) {
- if (format === undefined) {
- throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
- }
+ var argIndex = 0;
+ var message = 'Warning: ' + format.replace(/%s/g, function () {
+ return args[argIndex++];
+ });
+ if (typeof console !== 'undefined') {
+ console.error(message);
+ }
+ try {
+ // --- Welcome to debugging React ---
+ // This error was thrown as a convenience so that you can use this stack
+ // to find the callsite that caused this warning to fire.
+ throw new Error(message);
+ } catch (x) {}
+ };
- if (format.indexOf('Failed Composite propType: ') === 0) {
- return; // Ignore CompositeComponent proptype check.
- }
+ warning = function warning(condition, format) {
+ if (format === undefined) {
+ throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
+ }
- if (!condition) {
- for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
- args[_key2 - 2] = arguments[_key2];
- }
+ if (format.indexOf('Failed Composite propType: ') === 0) {
+ return; // Ignore CompositeComponent proptype check.
+ }
- printWarning.apply(undefined, [format].concat(args));
+ if (!condition) {
+ for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+ args[_key2 - 2] = arguments[_key2];
}
- };
- })();
+
+ printWarning.apply(undefined, [format].concat(args));
+ }
+ };
}
module.exports = warning;
diff --git a/examples/index.js b/examples/index.js
index a7686e7..993f9e1 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -32,6 +32,7 @@ class TypistExample extends React.Component {
return (
+
);
}