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;