nextjs-simple-typewriter v5.2.2

NextJs Simple Typewriter

a fork of react-simple-typewriter using 'use client' directive.

A simple react component for adding a nice typewriter effect to your project. In nextJS 13.4, an error is caused because hooks are not allowed on server-side code. this package fixes that and runs the code client-side. Enjoy

npm

npm i nextjs-simple-typewriter

Yarn

yarn add nextjs-simple-typewriter

Usage

There are two ways to Typewriter:

1. Component

import React from 'react'
import { Typewriter } from 'react-simple-typewriter'

const MyComponent = () => {
  return (
    <div className='App'>
      <Typewriter {/* Props */} />
    </div>
  )
}

Component Props

Usage Example

import React from 'react'
import { Typewriter } from 'react-simple-typewriter'

const MyComponent = () => {

  const handleType = (count: number) => {
    // access word count number
    console.log(count)}
  }

  const handleDone = () => {
    console.log(`Done after 5 loops!`)
  }

  return (
    <div className='App'>
      <h1 style={{ paddingTop: '5rem', margin: 'auto 0', fontWeight: 'normal' }}>
        Life is simple{' '}
        <span style={{ color: 'red', fontWeight: 'bold' }}>
          {/* Style will be inherited from the parent element */}
          <Typewriter
            words={['Eat', 'Sleep', 'Code', 'Repeat!']}
            loop={5}
            cursor
            cursorStyle='_'
            typeSpeed={70}
            deleteSpeed={50}
            delaySpeed={1000}
            onLoopDone={handleDone}
            onType={handleType}
          />
        </span>
      </h1>
    </div>
  )
}

2. Hook

BREAKING CHANGES v5.0.0 Hook now returns text along with some useful flags:

import { useTypewriter } from "react-simple-typewriter";

const MyComponent = () => {
  /**
   * @returns
   * text: [string] typed text
   * NEW helper: {} helper flags
   */
  const [text, helper] = useTypewriter({
    /* Config */
  });

  /* Hook helper */
  const { isType, isDelete, isDelay, isDone } = helper;

  return (
    <div className="App">
      <span>{text}</span>
    </div>
  );
};

Hook Config

Hook Usage Example

import React from "react";
import { useTypewriter } from "react-simple-typewriter";

const MyComponent = () => {
  const [text] = useTypewriter({
    words: ["Hello", "From", "Typewriter", "Hook!"],
    loop: 0,
  });

  return (
    <div className="App">
      <span>{text}</span>
    </div>
  );
};

Hook with Cursor

If you like to have the Cursor effect, you can import it as a separate Component

import React from "react";
import { useTypewriter, Cursor } from "react-simple-typewriter";

const MyComponent = () => {
  const [text] = useTypewriter({
    words: ["Hello", "From", "Typewriter", "Hook!"],
    loop: 3,
    onLoopDone: () => console.log(`loop completed after 3 runs.`),
  });

  return (
    <div className="App">
      <span>{text}</span>
      <Cursor cursorColor="red" />
    </div>
  );
};

Cursor Component Props

Demo

License

MIT © SoloReverse

• Thank you to Awran5
• Thank you for MidoAhmed for the updated rollup starter code rollup-react-library-starter