1.0.5 • Published 2 years ago
use-typewriter-effect v1.0.5
use-typewriter-effect
Highly flexible React hook with declarative API for typewriting effect
Install
npm install --save use-typewriter-effect
Demo
https://vincent-escoffier.vercel.app/typewriter
Basic Usage
import React from "react";
import useTypewriterEffect, {
getTypewriter,
useCursor,
} from "use-typewriter-effect";
function App() {
const [state, dispatch, isTyping] = useTypewriterEffect();
const cursor = useCursor(isTyping);
React.useEffect(() => {
getTypewriter(dispatch)
.type("Hello world!")
.pauseFor(1000)
.deleteSome("6")
.type("universe!")
.pauseFor(1000)
.deleteAll()
.setLoop(true)
.trigger();
// React guaranties that dispatch reference is stable, so we can safely
// declare it as a dependency
}, [dispatch]);
return (
<main>
<p>
{state}
<span style={{ visibility: cursor ? "visible" : "hidden" }}>|</span>
</p>
</main>
);
}
Example from the demo
import React from "react";
import useTypewriterEffect, {
getTypewriter,
useCursor,
} from "use-typewriter-effect";
function App() {
const [state, dispatch, isTyping] = useTypewriterEffect();
const cursor = useCursor(isTyping);
React.useEffect(() => {
getTypewriter(dispatch)
.type("Hello world!\n How are you")
.pauseFor(1000)
.deleteAll()
.type("This is a typewriter effect")
.pauseFor(1000)
.deleteSome(6)
.type("hook!")
.pauseFor(1000)
.deleteAll()
.setLoop(true)
.trigger()
}, [dispatch]);
const sentences = state.split("\n");
const lastSentence = sentences.pop();
return (
<main>
<input type="text" placeholder={lastSentence}/>
<div>
{sentences.map((sen, i) => (
<p key={i}><span style={{color:"cyan"}}>$</span> {sen}</p>
))}
<p>
<span style={{color:"cyan"}}>$</span> {lastSentence}
<span style={{visibility: cursor ? "visible" : "hidden"}}>|</span>
</p>
</div>
</main>
);
}
Typewriter API
In order to access the typewriter API, you must first call getTypewriter and pass it the typewriter hook dispatch.
Rendering will start after the trigger method is called. This gives you full control over the typing sequence.
You can use it inside a useEffect or in event handlers.
Options
Name | Type | Default | Description |
---|---|---|---|
type | string | null | Write the given string. |
pauseFor | number | null | Pause the typing. |
deleteSome | number | null | Delete some characters. |
deleteAll | Delete all typed characters so far. | ||
setLoop | boolean | If the given sequence of events should loop. | |
setDelay | number | 60:120 | Typing speed (ms) |
trigger | Update typewriter state with the previously built sequence of events and start rendering |
License
MIT