@bsherman-dev/use-typewriter NPM

React useTypewriter

Installation

You can install React useTypewriter with one command

# with npm
npm i @bsherman-dev/use-typewriter

Options

Name	Type	Default value	Description
text	String or String[]	"Hello World!"	Strings to type out when using this tool.
direction	String	"forward"	Option for whether to type or delete the characters of the text
repeat	Number	0	The number of times for the animation to repeat
speed	Number	200	The delay between each character when typing.

Examples

Most Basic example

import useTypewriter from '@bsherman-dev/use-typewriter';
import './App.css';

function App() {
  const message = useTypewriter();
  return <h1>{message}</h1>;
}

export default App;

Custom cursor with multiple strings being looped

import React from 'react';
import useTypewriter from '@bsherman-dev/use-typewriter';

function App() {
  const languages = ['HTML.', 'CSS.', 'JavaScript.'];
  const message = useTypewriter({
    text: languages,
    direction: 'both',
    repeat: -1,
    speed: 100,
  });
  return <h1>Hi! I like to code in {message}</h1>;
}

export default App;

react hook hooks typewriter typing-effect js javascript

@everything-registry/sub-chunk-145

1.0.0

2 years ago