1.0.0 • Published 2 years ago

@bsherman-dev/use-typewriter v1.0.0

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

React useTypewriter

Installation

You can install React useTypewriter with one command

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

Options

NameTypeDefault valueDescription
textString or String[]"Hello World!"Strings to type out when using this tool.
directionString"forward"Option for whether to type or delete the characters of the text
repeatNumber0The number of times for the animation to repeat
speedNumber200The 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;