Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add the possibility to set a custom root component tag #32

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add the possibility to set a custom root component tag #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ Refer to [`examples/`](/examples) for more examples.

## Options
* [`className`](#className)
* [`component`](#component)
* [`avgTypingDelay`](#avgTypingDelay)
* [`stdTypingDelay`](#stdTypingDelay)
* [`startDelay`](#startDelay)
Expand All @@ -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>
```

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for adding docs!

<a name="avgTypingDelay"></a>
#### avgTypingDelay
*Default*: `70`
Expand Down Expand Up @@ -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'
```
Expand Down
71 changes: 36 additions & 35 deletions dist/Typist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would you mind removing this generated code from the PR? I'll make sure to generate a new dist when I cut a new version.


return _react2.default.createElement(
'div',
WrapComponent,
{ className: 'Typist ' + className },
innerTree,
_react2.default.createElement(_Cursor2.default, _extends({ isDone: isDone }, cursor))
Expand All @@ -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,
Expand All @@ -241,6 +243,7 @@ module.exports =
};
Typist.defaultProps = {
className: '',
component: 'div',
avgTypingDelay: 70,
stdTypingDelay: 25,
startDelay: 0,
Expand Down Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions examples/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ class TypistExample extends React.Component {
return (
<div className="TypistExample">
<Typist
component="div"
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: do we really need this here?

className="TypistExample-header"
avgTypingSpeed={40}
startDelay={2000}
Expand Down
7 changes: 5 additions & 2 deletions src/Typist.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export default class Typist extends Component {

static propTypes = {
children: PropTypes.node,
component: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
Copy link
Owner

@jstejada jstejada Oct 16, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should be oneOfType([PropTypes.func, PropTypes.string]), if we actually want to allow component classes.
However, I'm thinking that for simplicity's sake, we should just take a string without allowing component classes at all. I thing just specifying a dom tag should be sufficient for most use cases.

className: PropTypes.string,
avgTypingDelay: PropTypes.number,
stdTypingDelay: PropTypes.number,
Expand All @@ -21,6 +22,7 @@ export default class Typist extends Component {

static defaultProps = {
className: '',
component: 'div',
avgTypingDelay: 70,
stdTypingDelay: 25,
startDelay: 0,
Expand Down Expand Up @@ -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>
);
}

Expand Down