Basic Usage
Learn the fundamental concepts and methods of use-typewriter-animation
.
Hook Structure
The useTypewriter
hook returns an object with these properties:
const {
typewriter, // Control object with methods
elements, // JSX elements to render
cursor, // Cursor component
keyframes, // CSS animations
accessibilityProps, // ARIA attributes
screenReaderAnnouncement // Screen reader content
} = useTypewriter(config);
Core Methods
Type Text
import { useEffect } from 'react';
import { useTypewriter } from 'use-typewriter-animation';
function TypeExample() {
const { typewriter, elements, cursor, keyframes } = useTypewriter();
useEffect(() => {
typewriter
.type('Hello, World!')
.type(' Welcome to React!')
.start();
}, []);
return (
<>
<style>{keyframes}</style>
<div style={{ fontSize: '1.2rem', fontFamily: 'monospace' }}>
{elements}
{cursor}
</div>
</>
);
}
Pause Animation
import { useEffect } from 'react';
import { useTypewriter } from 'use-typewriter-animation';
function PauseExample() {
const { typewriter, elements, cursor, keyframes } = useTypewriter();
useEffect(() => {
typewriter
.type('Loading')
.pauseFor(1000)
.type('...')
.pauseFor(500)
.type(' Complete!')
.start();
}, []);
return (
<>
<style>{keyframes}</style>
<div style={{ fontSize: '1.2rem', fontFamily: 'monospace' }}>
{elements}
{cursor}
</div>
</>
);
}
Delete Operations
import { useEffect } from 'react';
import { useTypewriter } from 'use-typewriter-animation';
function DeleteExample() {
const { typewriter, elements, cursor, keyframes } = useTypewriter();
useEffect(() => {
typewriter
.type('JavaScript Developer')
.pauseFor(1000)
.deleteWords(1) // Delete "Developer"
.type('React Expert')
.pauseFor(1000)
.deleteLetters(5) // Delete "Expert"
.type('Enthusiast')
.start();
}, []);
return (
<>
<style>{keyframes}</style>
<div style={{ fontSize: '1.2rem', fontFamily: 'monospace' }}>
{elements}
{cursor}
</div>
</>
);
}
New Lines
import { useEffect } from 'react';
import { useTypewriter } from 'use-typewriter-animation';
function NewLineExample() {
const { typewriter, elements, cursor, keyframes } = useTypewriter();
useEffect(() => {
typewriter
.type('Line 1')
.newLine()
.type('Line 2')
.newLine()
.type('Line 3')
.start();
}, []);
return (
<>
<style>{keyframes}</style>
<div style={{ fontSize: '1.2rem', fontFamily: 'monospace', whiteSpace: 'pre-line' }}>
{elements}
{cursor}
</div>
</>
);
}
Text Colors
import { useEffect } from 'react';
import { useTypewriter } from 'use-typewriter-animation';
function ColorizeExample() {
const { typewriter, elements, cursor, keyframes } = useTypewriter();
useEffect(() => {
typewriter
.type('Regular text, ')
.colorize('#ef4444')
.type('red text, ')
.colorize('#3b82f6')
.type('blue text')
.start();
}, []);
return (
<>
<style>{keyframes}</style>
<div style={{ fontSize: '1.2rem', fontFamily: 'monospace' }}>
{elements}
{cursor}
</div>
</>
);
}
Method Chaining
All methods can be chained together:
typewriter
.type('Step 1')
.pauseFor(1000)
.newLine()
.colorize('#3b82f6')
.type('Step 2')
.pauseFor(500)
.deleteLetters(6)
.type('Complete!')
.start();
Configuration Options
Speed Control
import { useEffect } from 'react';
import { useTypewriter } from 'use-typewriter-animation';
function SpeedExample() {
const { typewriter, elements, cursor, keyframes } = useTypewriter({
typeSpeed: 120, // Slower typing
deleteSpeed: 40, // Faster deleting
});
useEffect(() => {
typewriter
.type('Slow typing...')
.pauseFor(1000)
.deleteAll()
.type('Done!')
.start();
}, []);
return (
<>
<style>{keyframes}</style>
<div style={{ fontSize: '1.2rem', fontFamily: 'monospace' }}>
{elements}
{cursor}
</div>
</>
);
}
Cursor Styles
import { useEffect } from 'react';
import { useTypewriter } from 'use-typewriter-animation';
function CursorExample() {
const { typewriter, elements, cursor, keyframes } = useTypewriter({
cursorStyle: 'block',
cursorColor: '#ef4444',
});
useEffect(() => {
typewriter.type('Block cursor style').start();
}, []);
return (
<>
<style>{keyframes}</style>
<div style={{ fontSize: '1.2rem', fontFamily: 'monospace' }}>
{elements}
{cursor}
</div>
</>
);
}
Available cursor styles:
'bar'
(default) - Vertical line'block'
- Solid block'underline'
- Underscore
Event Handling
typewriter
.type('Loading...')
.on('end', () => {
console.log('Animation completed!');
})
.start();
Complete Example
import { useEffect } from 'react';
import { useTypewriter } from 'use-typewriter-animation';
function CompleteExample() {
const { typewriter, elements, cursor, keyframes } = useTypewriter({
typeSpeed: 60,
deleteSpeed: 40,
cursorStyle: 'bar',
cursorColor: '#3b82f6',
});
useEffect(() => {
typewriter
.type('Hello! I am a ')
.colorize('#3b82f6')
.type('React')
.colorize('#000000')
.type(' developer')
.pauseFor(2000)
.newLine()
.type('Welcome to my ')
.colorize('#ef4444')
.type('awesome')
.colorize('#000000')
.type(' website!')
.start();
}, []);
return (
<>
<style>{keyframes}</style>
<div style={{
fontSize: '1.2rem',
fontFamily: 'monospace',
whiteSpace: 'pre-line',
lineHeight: '1.6'
}}>
{elements}
{cursor}
</div>
</>
);
}
Next Steps
- API Reference - Complete API documentation
- Configuration - All configuration options
- Examples - More complex examples