isTyping(()->do something)? Is there any similar function in typewriterjs that will keep triggering a function?

[king112ola]

I hope all of you are doing Well :)

I need this function to track if a is still typing; if yes, trigger the scrollIntoView() function to force the page view to the bottom.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/DuckyMomo20012"><img src="https://avatars.githubusercontent.com/u/64480713?v=4" />DuckyMomo20012</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p><strong>Yes</strong>, you can track it with the <code>onCreateTextNode</code> function. This function is called when the typewriter is about to add some nodes to the DOM.</p> <blockquote> <p><strong>Note</strong>: This function has two parameters: <code>character</code>: <code>string</code> type and <code>textNode</code>: <code>Text</code> type. With the string "<code>A very long message</code>", the <code>character</code> is: <code>A</code>, <code>`,</code>v<code>,... You can use the function</code>createTextNode<code>to construct a</code>Text<code>node just like in the example below or return directly the</code>textNode`.</p> </blockquote> <p>Example:</p> <pre><code class="language-jsx"><Typewriter onInit={(typewriter) => { typewriter.typeString('A very long message').start(); }} options={{ onCreateTextNode: (character) => { bottomRef.current?.scrollIntoView({ behavior: 'smooth', }); return document.createTextNode(character); }, }} />;</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/king112ola"><img src="https://avatars.githubusercontent.com/u/13461201?v=4" />king112ola</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Thx a lot! i will give it a try asap!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/wibawasuyadnya"><img src="https://avatars.githubusercontent.com/u/41501779?v=4" />wibawasuyadnya</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>how about checking if it's completed @DuckyMomo20012 ?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/wibawasuyadnya"><img src="https://avatars.githubusercontent.com/u/41501779?v=4" />wibawasuyadnya</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>I had this TypeWriter as component and pass the function of Scrolltobottom as props </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/DuckyMomo20012"><img src="https://avatars.githubusercontent.com/u/64480713?v=4" />DuckyMomo20012</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Sorry for the <em>late</em> reply, with the example in the <a href="https://github.com/tameemsafi/typewriterjs?tab=readme-ov-file#react">doc</a>:</p> <pre><code class="language-js"><Typewriter onInit={(typewriter) => { typewriter .typeString('Hello World!') .callFunction(() => { console.log('String typed out!'); }) .pauseFor(2500) .deleteAll() .callFunction(() => { console.log('All strings were deleted'); }) .start(); }} />;</code></pre> <p>After the <code>typeString</code> function, you can call function <code>callFunction</code> to do an action based on typing completion, the same for function <code>deleteAll</code>.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>