);
}
```
## Example from the demo
```tsx
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 (
{sentences.map((sen, i) => (
$ {sen}
))}
$ {lastSentence}
|
);
}
```
## 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
---
_Source: https://npm.io/package/use-typewriter-effect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._