at cloneElement (Typist.js:1831)
    at cloneElementWithSpecifiedTextAtIndex (Typist.js:1856)
    at Object.cloneElementWithSpecifiedText (Typist.js:1876)
    at Typist.render (Typist.js:402)
    at finishClassComponent (react-dom.development.js:15119)
    at updateClassComponent (react-dom.development.js:15074)
    at beginWork (react-dom.development.js:16064)

when using something like

<Typist>
	<React.Fragment>
		text
		<Typist.Backspace count={4} delay={delay} />
	</React.Fragment>
</Typist>

[email protected]

I'm using typist to generate a typed effect title for a website.

However, I have multiple lines of text and each time a line break occurs, the text that has already been typed it pushed upward (see gif).

Can this be stopped and can the new line of text appear below the previously typed text. I have seen it done before but cannot replicate it (like this).

My JS:

export default class TypistTitle extends Component {
  render() {
    return (
      <Typist>
        <div className="main_title">
          Lorem ipsum dolor gentrify fam bespoke
          <br />
          Pork belly church-key snackwave tbh, subway tile tumeric
          <Typist.Backspace count={20} delay={200} />
          <br />
          Brooklyn woke cliche farm-to-table. YOLO salvia 8-bit
        </div>
      </Typist>
    )
  }
}

My CSS:

.main_title {
  font-family: "Open Sans", sans-serif;
  font-size: 3em;
  font-weight: 200;
  margin-left: 3vw;
}

I have been using the module on my local machine and everything works perfectly.
However, when I moved to production, Typist.Backspace & Typist.Delay have completely stopped working.
I mean that the text will just be added to the previous one, without any rythme change.
The output is just one big string

<Typist onCharacterTyped={this.someFunction} avgTypingDelay={150} startDelay={1000} >
    FOO
    <Typist.Backspace count={30} delay={3000}/>
    <Typist.Delay ms={3000} />
    BAR
</Typist>

//FOOBAR

If it can be any indicator, I noticed that on localhost when the Typist.Backspace occurs, this happens:

someFunction = (char, charIndex) => {
 console.log(char) // BACK (+ a right arrow on top)
};

But nothing is logged when in production.

Any idea what I am getting wrong?

Thanks

using react 15.4, I get an error only in safari.
TypeError: 'undefined' is not a function (evaluating 'Array.from(arr)')

GoTo https://jstejada.github.io/react-typist/ in safari to duplicate the error

At the moment the blink cursor is using this global css name .Typist .Cursor--blinking .

Importing this stylesheet with modern tooling like CSS Modules results to a transformed name which is not a match to the classname above.

Also not a very good practice, a better approach could be implementing it using styled-components or injecting the stylesheet inside header within the component scope.

Any thoughts?

I get this error when I navigate from a page where there is a Typist instance. It seems that Typist want to modify state although the component is unmounted:

warning.js:48 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.warning
@ warning.js:48 getInternalInstanceReadyForUpdate
@ ReactUpdateQueue.js:49 enqueueSetState
@ ReactUpdateQueue.js:196 ReactComponent.setState
@ ReactComponent.js:71 (anonymous function)
@ Typist.js:182 adv
@ Typist.js:376 adv
@ Typist.js:372

I don't know if I got this right, but maybe it has to do with the setTimeout in eachRndTimeout of utils.js? For a fix, we can store the timeout id in a variable in utils.js, add a function to clearTimeout this id, and call this function in the componentWillUnmount of Typist component?

Using a Meteor.js application. I installed meteorhacks:npm and the appropriate react packages.

My packages.json looks like:
{ "name": "name", "version": "1.0.0", "description": "react", "main": "index.js", "dependencies": { "react-dom": "^0.14.7", "react-typewriter": "^0.3.0", "react-typist": "^0.3.0" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

I receive this output when I try to install:

`
:myproject *******_$ npm install react-typist --save
[email protected] /Users/_*****/www/myproject
└── [email protected]

npm WARN EPACKAGEJSON [email protected] No repository field.
`

What is happening here?

Hello.
I'm wanna make a component passing the content as a property.
My code is:

Nothing happens, nothing on the console either.
Is it possible?

Sebastian.

I would like to use the most recent version directly from github. I installed the package using

npm install jstejada/react-typist#master

The module source is installed but not built and therefore does not work. "import Typist from 'react-typist'" fails.

How am I supposed to handle this?

Thanks!

Hello, i'm trying to use Typist.Delay but is not working properly, see example above:

on code has Delay of 9050ms between two lines.

Is there anyway to restart the animation when an event occurs. I am somewhat new to Reactjs but usually doing something like this.ref.name.reset() works. In this case, it does not.

Thank you for the lib and all the help.
Tim

Problem

The docs say that the avgTypingDelay prop is default '70'. However, this does not seem to be accurate. When you pass in avgTypingDelay='70' as a prop, the typing speed is much slower.

Reproduction

Do this:

`<Typist>Text to type. Blah, blah, blah </Typist>`

Then do this:

`<Typist avgTypingDelay='70'>Text to type. Blah, blah, blah </Typist>`

Note that in the second case the typing speed is much slower, even though I'm passing in the 'default value'.

Hey there!

It would be awesome if we could make react-typist play nice with ink. Currently, the text blinks crazy while Typist is animating.

If you guys point me on some direction, I could try and work on pull-requests...

React element as a child doesn't render, to recreate:

Just renders the cursor:

No errors are thrown, but the component never renders anything, even with the most basic use case of <Typist>Some words to type.</Typist>

Switching back to 15.6.2 resolves the issue.

First off, thank you for the component. It is amazing. Suggestion. When the typing is complete, and disappear is enabled, instead of vanishing fast I think the cursor should also give the option of a fade and animation duration.

Is there a callback or prop for starting or stopping Typist depending on a trigger? I'm using React-Fullpage and want the typing to start upon page scroll. Currently, when the page is scrolled to the typing will have already began and possibly finished. I was wondering whether there was an inbuilt callback for waiting/delaying the typing until I direct it to begin. Nice package though!

What are the supported browsers? Could this information be added to the Readme maybe?

I am seeing issues with IE11. You are using the static array methods that are not supported by IE11. Any plans on supporting IE11?

<Typist avgTypingDelay={200}
        startDelay={1000}
        cursor={{blink:true}}
        onTypingDone={this.renderAbout}>
        <a>Hello!</a>
      <Typist.Delay ms={500}/>
      <Typist.Backspace count={6} delay={50}/>
        </Typist>

This is inside my React Render function. setting cursor={{blink:true}} and my CSS has cursor: pointer; still it does not blink?

Hi,
cool library. Would be convenient to have some possibility to immediately show the complete text.

E.g. on mouse click show the complete text

When using headings, the cursor is not on the same line

Are welcome the pr?

Thanks so much for you library. I use it and I want to help out.

I wanted to add the lifecycle method getDerivedStateFromProps.

I am putting my own app thru React.StrictMode and came your library uses componentWillReceiveProps and this will just prepare your library to be up to date for used with React.Suspense and React.lazy(). Let me know if I can help out.

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props

Hello, thanks for the component. How about add loop typing effect? https://storj.io/ is the example.

dose it support RTL?

I've encountered some issues working with react-typist :

• It doesn't work if you use react-intl with <FormattedMessage/> tags (the text isn't written).
• It works fine if you use instead {formatMessage()} inside the <span> tag but.. as soon as the text is written, you'd have to reload the page to translate it either way it won't (and you have then some text in one language and what's left in a second one..). Not that pretty :/

Anyway to correct this ? I'm not saying I use it perfectly cause I'm quite new to react and react-intl but I'm posting this just so you're aware of these issues (and in case someone has a solution) 👍

Anyway, your solution if pretty neat and useful.

Is there a way to customize how fast the Backspace Component deletes the text? I want to only change the speed of the backspacing, not the typing-speed.

There are times where a text gets duplicated after the animation is done. Is this a known issue?

Depending on the sentence or padding the animation stops at random places, no matter the length of the passage. If I change the word or spacing I can get it to complete but this means that it can not just take any text without review.

Has anyone else run into this issue? Any workarounds?

Thanks,
Tim

thank you for the typist module!
today, i have noticed a deprecation notice whenever i run test (using jest):

console.warn node_modules/react-dom/cjs/react-dom.development.js:11494
  Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Cursor

here is my system information:

$ npm ls react react-dom react-typist
[email protected] /Users/foo/react
├── [email protected]
├── [email protected]
└── [email protected]

$ node --version
v12.11.0

$ npm --version
6.11.3

i wanted to bring this to your attention before the module will break with never version of react.
for instance, componentWillReceiveProps() is used in Crusor.jsx.

thank you again.

Is it possible to put the typist on a loop? (ie restart after done)

Is it possible for the letters to also fade in as they are being typed?

Hi,
I'm working with a typist component that uses dynamically api-generated text as the "child" or nested content.

The Typist component itself is rendered conditionally upon all of the necessary text being loaded to local state and passed into the nested text.

{ this.state.display ? 
        <Typist>
                this is some text. today is {this.state.dayOfWeek}. 
                <br />
                <br />
                it is {this.state.localTemp} degrees outside
                <br />
                <br />
                .....
                <br />
                <br />
                ....
        </Typist>
: '' }

As you can see use a number of <br /> components in the body of this text, and on 80% of page loads, the animation proceeds to the end, but i receive the following error at varying points in the typing sequence:

Warning: Encountered two children with the same key, Typist-element-br-1535132419832.6477. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
in div (created by Typist)

At the same time as the error message logs in the console, an additional <br /> renders somewhere in the block of text as it continues typing.

this causes the entire block of text to jump down a line (or lines, depending on the number of times this error is thrown).

Any insight on how to avoid this? I've tried explicitly passing a key as a prop/attr on each <br /> but no luck.

Thanks

Hey! Great plugin. I had a question on how to integrate with the input placeholder

Say I have this

<Typist>
    <span> Try "This"</span>
    <Typist.Backspace count={8} delay={1000}/>
    <span> Phrase </span>
</Typist>

 <input placeholder={"I want to animate this as typing"} >

How do i animate the placeholder text of the input ?

Description
I have tried to add emoji to labels that I want to type via Typist and they are rendered okay. However, while backspacing is removing emoji, they are rendered like an unknown char symbol for a second before removing from the screen.

<Typist>
     <p>Test <span className="emoji">🛠</span></p>
     <Typist.Delay ms={1000} />
     <Typist.Backspace count={16} delay={1000} />
     <p>Test 2 <span className="emoji">👋🛒📈🏕</span></p>
     <Typist.Delay ms={500} />
     <Typist.Backspace count={21} delay={1000} />
     <p>Test 3 <span className="emoji">🐹</span></p>
</Typist>                          

Expected Result
Emoji is backspacing without showing the unknown char symbol like other chars.

Actual Result
Emoji is backspacing with showing the unknown char symbol:

Hello,

I have been playing with your module, and I have come across an issue. I am trying to create a dynamically changing header component that will change the string of the header every 4 seconds. I am able to get tags to change dynamically just fine with my component, but using typist I get the first prop (beginning of an array of strings) and then it does not receive the next props.

I did notice in your module, you do not have componentWillReceiveProps(nextProps) and this may be the reason it is not changing when a new prop is rendered. I'm honestly not really sure, wondering if I could get your input.

Thanks.

https://envato.com/ like here

Dependencies:

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.7.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.8.3",
    "react-hot-loader": "^4.0.1",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  },
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.5",
    "@fortawesome/fontawesome-free-brands": "^5.0.9",
    "@fortawesome/fontawesome-free-solid": "^5.0.9",
    "@fortawesome/react-fontawesome": "0.0.18",
    "bootstrap": "^4.0.0",
    "classnames": "^2.2.5",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-router-dom": "^4.2.2",
    "react-transition-group": "^2.3.0",
    "react-typist": "^2.0.4",
    "reactstrap": "^5.0.0-beta.3",
    "styled-components": "^3.2.5"
  }

Code sample:

<Typist
  cursor={{ element: '_' }}
  startDelay={1000}
>
  Example
  <Typist.Backspace count={3} delay={500} />
</Typist>

Expected Behavior:
It should write Example then backspace to Exam.

Current Behavior
Doesn't backspace at all. Same thing happens with Typist.Delay, doesn't work.

I took a brief look at the code but didn't find the issue.

Hi, i'm new to web dev,
How can i correct this error:
I want Typist components to get the defaultvalue of the textarea

import React from 'react';
import './index.css';
import Typist from 'react-typist'; // https://github.com/jstejada/react-typist

//! WITH WARNINGS, ERRORS AND TYPIST
class Message extends React.PureComponent {
  render() {
    const dearMessage = "Dear Maxime, ";
    return (
      <div className="contact-message">
        <Typist>
          <textarea id="contact-textarea" name="message" spellCheck="false">
            {dearMessage}
          </textarea>
        </Typist>
      </div>
    );
  }
}
export default Message

index.js:1452 Warning: Use the defaultValue or value props instead of setting children on <textarea> in textarea (created by Typist)

this one doesnt work with typist but doesnt create warnings/errors

(...)

//! WITHOUT WARNINGS, ERRORS AND TYPIST
class Message extends React.PureComponent {
  render() {
    const dearMessage = "Dear Maxime, ";
    return (
      <div className="contact-message">
          <textarea id="contact-textarea" name="message" spellCheck="false" defaultValue={dearMessage}>
          </textarea>
      </div>
    );
  }
}
(...)

thank you for your time and help

Hello,

My React is pre-rendered on the server, and when I try to use react-typist I get this error on the server:

ReferenceError: window is not defined
[1]     at new Typist (/Users/user/myapp/node_modules/react-typist/dist/Typist.js:146:41)
[1]     at ReactCompositeComponentMixin.mountComponent (/Users/user/myapp/node_modules/react/lib/ReactCompositeComponent.js:148:18)
[1]     at wrapper [as mountComponent] (/Users/user/myapp/node_modules/react/lib/ReactPerf.js:66:21)
[1]     at Object.ReactReconciler.mountComponent (/Users/user/myapp/node_modules/react/lib/ReactReconciler.js:37:35)
[1]     at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/user/myapp/node_modules/react/lib/ReactMultiChild.js:241:44)
[1]     at ReactDOMComponent.Mixin._createContentMarkup (/Users/user/myapp/node_modules/react/lib/ReactDOMComponent.js:591:32)
[1]     at ReactDOMComponent.Mixin.mountComponent (/Users/user/myapp/node_modules/react/lib/ReactDOMComponent.js:479:29)
[1]     at Object.ReactReconciler.mountComponent (/Users/user/myapp/node_modules/react/lib/ReactReconciler.js:37:35)
[1]     at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/user/myapp/node_modules/react/lib/ReactMultiChild.js:241:44)
[1]     at ReactDOMComponent.Mixin._createContentMarkup (/Users/user/myapp/node_modules/react/lib/ReactDOMComponent.js:591:32)

Any idea what I can do to avoid this issue?

Love this package!

Would love it even more if I could easily pass an array and have it type one sentence at a time (replacing each time). There is currently not a simple way to do this... I tried to use onTypingDone to call itself again but no luck:

const typeSentence = (sentence) => {
  return (
      <Typist
          avgTypingDelay={50}
          cursor={
          {
            show: true,
            blink: true,
            element: '|',
            hideWhenDone: false,
            hideWhenDoneDelay: 1000,
          }
          }
          onTypingDone={() => typeSentence(sample([sentenceArray])}
          startDelay={1000}
          stdTypingDelay={20}
      >
        {sentence}
      </Typist>
  );
};

The cursor is appearing on the next line, and not on the current one.

I'll place the code here:

<Typist>
    <div className="weather-title">
      <h3>title</h3>
      <div className="p-holder">
        <p>
          another text
        </p>
        <p>
          another text
          </a>?
        </p>
        <p>
          text
        </p>
      </div>
    </div>
  </Typist>

Hello,
the plugin seems to not be property configured when building.
See the error. After installing all the dependencies with npm install, then building and doing npm start it gives the following:
`ERROR in ./examples/main.scss
Module build failed: Error: Cannot find module 'node-sass'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/Users/albertoziveri/Downloads/react-typist-master/node_modules/sass-loader/index.js:4:12)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
@ ./examples/index.js 17:0-22

ERROR in ./src/Cursor.scss
Module build failed: Error: Cannot find module 'node-sass'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/Users/albertoziveri/Downloads/react-typist-master/node_modules/sass-loader/index.js:4:12)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
@ ./src/Cursor.jsx 17:0-24
Child extract-text-webpack-plugin:

ERROR in Cannot find module 'node-sass'

Child extract-text-webpack-plugin:

ERROR in Cannot find module 'node-sass'

webpack: Failed to compile.

`

Setting blink in the cursor option currently causes it to blink with a fade in/out animation. Is there a way to blink without fading (as in the style of most text editors?)

Search engines fetch as an empty string when used. There should be a solution to that.

How to include the 'dist/Typist.css' on Dev and Production

Basically, when you apply this component to a centered string of text, its shifts the already-typed text to the left, as you're typing on the right. This makes the text hard to read.

Is it possible to have the text placement static on centered text? I.e. it starts typing on the left of the screen and finishes typing on the left.

As an example, look at the effect here: https://caferati.me/ The text is in a static position as it's being typed, yet it's centered.

Also, is there a way to have an infinite loop of typing on the same line (write one line, backspace it, then write another line, backspace it, then loop back to the first line, etc...)

Hi! I'm trying to use this package in a GatsbyJS project but the Typist component doesn't seem to render. Tested it on a CRA, and it works great!

Has anyone else tried using this on a GatsbyJS project?

Help a fellow out and put it back? :-)