awran5 / react-simple-typewriter Goto Github PK

View Code? Open in Web Editor NEW

127.0 2.0 24.0 1.69 MB

A simple react component for adding a nice typewriter effect to your project.

Home Page: https://react-simple-typewriter.vercel.app/

License: MIT License

TypeScript 79.16% CSS 3.67% JavaScript 17.17%

typewriter react react-component react-hooks typewriter-effect hook

react-simple-typewriter's Introduction

React Simple Typewriter

A simple react component for adding a nice typewriter effect to your project.

Install

npm

npm i react-simple-typewriter

Yarn

yarn add react-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

Prop	Type	Options	Description	Default
`words`	array	Required	Array of strings holding the words	`['Hello', '...']`
`typeSpeed`	number	Optional	Character typing speed in Milliseconds	`80`
`deleteSpeed`	number	Optional	Character deleting speed in Milliseconds	`50`
`delaySpeed`	number	Optional	Delay time between the words in Milliseconds	`1500`
`loop`	number \| boolean	Optional	Control how many times to run. `0 \| false` to run infinitely	`1`
`cursor`	boolean	Optional	Show / Hide a cursor	`false`
`cursorStyle`	ReactNode	Optional	Change the cursor style available if `cursor` is `enabled`	`\|`
`cursorBlinking`	boolean	Optional	Enable cursor blinking animation	`true`
`onLoopDone`	function	Optional	Callback function that is triggered when loops are completed. available if `loop` is `> 0`	`-`
`onType`	function	Optional	Callback function that is triggered while typing with typed words `count` passed	`-`
`onDelay`	function	Optional	Callback function that is triggered on typing delay	`-`
`onDelete`	function	Optional	Callback function that is triggered while deleting	`-`

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:

Prop	Type	Description
`isType`	boolean	Check if currently typing
`isDelete`	boolean	Check if currently deleting
`isDelay`	boolean	Check if currently on delay
`isDone`	boolean	Check if all running loops are done

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

Prop	Type	Options	Description	Default
`words`	array	Required	Array of strings holding the words	`['Hello', '...']`
`typeSpeed`	number	Optional	Character typing speed in Milliseconds	`80`
`deleteSpeed`	number	Optional	Character deleting speed in Milliseconds	`50`
`delaySpeed`	number	Optional	Delay time between the words in Milliseconds	`1500`
`loop`	number \| boolean	Optional	Control how many times to run. `0 \| false` to run infinitely	`1`
`onLoopDone`	function	Optional	Callback function that is triggered when loops are completed. available if `loop` is `> 0`	`-`
`onType`	function	Optional	Callback function that is triggered while typing	`-`
`onDelete`	function	Optional	Callback function that is triggered while deleting	`-`
`onDelay`	function	Optional	Callback function that is triggered on typing delay	`-`

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

Prop	Type	Options	Description	Default
`cursorStyle`	ReactNode	Optional	Change cursor style	`\|`
`cursorColor`	String	Optional	Change cursor color	`inherit`
`cursorBlinking`	Boolean	Optional	disable cursor blinking animation	`true`

License

MIT © awran5

react-simple-typewriter's People

Contributors

Stargazers

Watchers

react-simple-typewriter's Issues

I am using the library for a server rendered site, and I'm using the library on client only. I have a fallback value for when the libreary is not loaded.
I was curious if we could start the animation by delete.Eg. ["Developer", "HTML", "CSS"]
Developer (Initial fallback)
Developer| (after library load)
Develope|
Develop|
Develo|
Devel|

Request: Cursor should not blink while typing and deleting words

It's bothering me a little that the cursor blinks while typing or deleting, this is not how regular cursors behave.

And as an extra request, could you also expose an onDelete function which is invoked for every deleted key (similar to onType)? I would be using this to implement my own custom cursor (I'd like to change the blinking timing, but I don't think it's worth exposing more cursor configs in this library's API)

hidding the cursor after a map item has been rendered.

Hello guys. I hope you are all doing well.

i would like to know if there is a short hand for disabling the cursor for a mapped component after the loop is done.

i have tried the onLoopDone function provided, but this won't work if the the typewriter is nested inside a continuously updating component.

For example,

const [cursorOn,setCursorOn]  = useState(true)

message.map(item=>{
return(
   <Typewriter cursor={cursorOn} onLoopDone={()=>setCursorOn(false)}>{item}</Typewriter>
)})

i thought of creating a cursor on off state for each component inside a map, but i hope there is an easier way that the cursor will be automatically disabled after the loop has been completed.

Apperciate it.

Is it possible to change the words and have it redo the typing?

Update package to use latest react version

When I tried making (installing) use of this package, I get an error in my terminal, which is due to the versions of react conflicting with each othet. Mine is react@"17.0.2" while that of the package is react@"^16.0.0".

For me to be able to get it to work. I'd have to run the command by adding the --force or --legacy-peer-deps flag

npm install react-simple-typewriter --force || --legacy-peer-deps

I'd love to take on this issue.

TypeError: Cannot read properties of null (reading 'useReducer')

Just got this error when trying to use the function

Code used:

const [text, count] = useTypewriter({
    words: ["Hi, my name's Ethan", "Developer", "Creator"],
    loop: true,
    delaySpeed: 2000,
  });
  return (
    <div>
      <p>{text}</p>
    </div>
  );

function onLoopDone not working until I refresh DOM manually in Next13

Hi, I'm facing the following issue:

I've set useState hook in order to render an array of items after writting effect, so onLoopDone mush call the handleCards function after loop ends, but it's not working.

const [cards, setCards] = useState<boolean>(false);
  function handleCards() {
    console.log("works!");
    setCards(true);
  }
<Typewriter
          words={[text]}
          loop={1}
          typeSpeed={10}
          onLoopDone={handleCards}
          deleteSpeed={10}
        />
        <Cursor />

Dependencies:
"next": "13.4.10",
"react-dom": "18.2.0",

Question mark before the preview of the emoji

At the beginning of the emoji preview ,
there is a question mark for 1 second before
actually the emoji shows up.

Looping not working

Hi, I´m using the react-simple-typewriter with next.js, but the loop isn´t working. It´s types the first word, delete it, but not type the other words.

Pause / Resume?

I need the effect to pause once the document.hidden = true and resume once document.hidden = false. I can't seem to get a handle on this as it runs while the document isn't being viewed and slowing down the browser especially if typewriting for a long time. I tried using document.addEventListener("visibilitychange") and had no luck. Thanks!

How to run only once?

How can I get the typewriter effect to just run once and leave the text as-is?

I don't want any text deleted. Just want to type out a sentence and leave it displayed.

How to randomize words order?

I have the array of facts and every time the typing is done i want new fact, how to achieve that?

  const pickRandomString = () => {
    let random = Math.floor(Math.random() * facts.length);
    console.log(facts[random])
    return [facts[random]];
  }

  const [text, flags] = useTypewriter({
    words: pickRandomString(),
    loop: false,
    typeSpeed: 50,
    deleteSpeed: 40,
    //onLoopDone: () => console.log("done from typewriter hook")
  });

No typing effect on text wrap on Safari - iPhone

(7 high severity vulnerabilities)

Add a 'reset' helper to reset the typing animation

I'm using this package with framer-motion for a complex animation sequence and it would be great to have a helper to trigger a reset of the animation from the beginning.

const { isType, isDelete, isDelay, isDone, reset } = helper

I'd be happy to contribute this feature but it looks like it's been a while since there's been activity on this package; @awran5 are you still maintaining the repo / reviewing PR's? Thanks!