Add the possibility to set a custom root component tag

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.
 <div class="Typist MyTypist"> Animate this text. </div>
 ```
 
+<a name="component"></a>
+#### component
+*Default*: `div`
+
+Component tag to be applied to the Typist root node. **(string/React.Element)**
+
+```xml
+<Typist component="span"> Animate this text. </Typist>
+```
+ will produce:
+```xml
+<span class="Typist"> Animate this text. </span>
+```
+
 <a name="avgTypingDelay"></a>
 #### 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'
 ```

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;

examples/index.js

@@ -32,6 +32,7 @@ class TypistExample extends React.Component {
  return (
  <div className="TypistExample">
  <Typist
+ component="div"
  className="TypistExample-header"
  avgTypingSpeed={40}
  startDelay={2000}

src/Typist.jsx

@@ -8,6 +8,7 @@ export default class Typist extends Component {
 
  static propTypes = {
  children: PropTypes.node,
+ component: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
  className: PropTypes.string,
  avgTypingDelay: PropTypes.number,
  stdTypingDelay: PropTypes.number,
@@ -21,6 +22,7 @@ export default class Typist extends Component {
 
  static defaultProps = {
  className: '',
+ component: 'div',
  avgTypingDelay: 70,
  stdTypingDelay: 25,
  startDelay: 0,
@@ -133,12 +135,13 @@ export default class Typist extends Component {
  const { className, cursor } = this.props;
  const { isDone } = this.state;
  const innerTree = utils.extractTreeWithText(this.props.children, this.state.text);
+ const WrapComponent = this.props.component;
 
  return (
- <div className={`Typist ${className}`}>
+ <WrapComponent className={`Typist ${className}`}>
  {innerTree}
  <Cursor isDone={isDone} {...cursor} />
- </div>
+ </WrapComponent>
  );
  }