https://github.com/gerardmarquinarubio/ReactTypewriter

Easy to use typewriter component written with Typescript and React 18+ in mind
https://github.com/gerardmarquinarubio/ReactTypewriter

components react react-components reactjs

Last synced: 3 months ago
JSON representation

Easy to use typewriter component written with Typescript and React 18+ in mind

• Host: GitHub
• URL: https://github.com/gerardmarquinarubio/ReactTypewriter
• Owner: gerardmarquinarubio
• License: bsd-3-clause
• Created: 2022-06-21T14:11:01.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-18T13:04:27.000Z (over 1 year ago)
• Last Synced: 2024-04-24T00:41:38.323Z (9 months ago)
• Topics: components, react, react-components, reactjs
• Language: TypeScript
• Homepage:
• Size: 269 KB
• Stars: 34
• Watchers: 1
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components - react-ts-typewriter - [demo](https://codesandbox.io/s/react-typewriter-example-mgyclf) - Easy to use and customizable typewriter effect for any text. (UI Animation / Form Components)
• fucking-awesome-react-components - react-ts-typewriter - 🌎 [demo](codesandbox.io/s/react-typewriter-example-mgyclf) - Easy to use and customizable typewriter effect for any text. (UI Animation / Form Components)
• awesome-react-components - react-ts-typewriter - [demo](https://codesandbox.io/s/react-typewriter-example-mgyclf) - Easy to use and customizable typewriter effect for any text. (UI Animation / Form Components)
• awesome-react-components - react-ts-typewriter - [demo](https://codesandbox.io/s/react-typewriter-example-mgyclf) - Easy to use and customizable typewriter effect for any text. (UI Animation / Form Components)

README

        
 〰 ⌨️ 〰 React Typewriter 〰 ⌨️ 〰



 

























React Typewriter is a simple component that allows you to create a nice "typewriter" effect to any text by simply invoking the component. Try on codesandbox.io.


## Installation

```sh

npm i react-ts-typewriter

```

## Example usage

```tsx

import Typewriter from 'react-ts-typewriter';

export default function myComponent() {

    return (

        


            

        

    )

}

```


## Props

    Prop nameTypeDescriptionRequiredDefault

    textstring | string[]Text to display as string or an array of stringstrue

    speednumberHow long (in ms) does the the typewriter wait after typing one characterfalse30ms

    loopbooleanSet to true if the typewriter should loop after finishing typing the string(s)falsefalse

    randomnumberMs of randomness that should be added after each keystroke. If set to zero then each stroke will strictly take speedms to completefalse30ms

    delaynumberMs to wait after compleating the word. Useless if loop is set to false or text is not an arrayfalse30ms

    cursorbooleanSet to false if the typewriter should not render a blinking cursor character at the end of the stringfalsetrue

    onFinishedFunctionCallback function after Typewriter animation is complete, never triggers if loop is truefalse() => void

    onStartFunctionCallback function before Typewriter animation is started on each stringfalse() => void