Have ideas to improve npm?Join in the discussion! »

    react-typewriting-effect
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    react-typewriting-effect

    The simplest typewriter effect component in React. ( Requires react >=16.8.0 )

    NPM JavaScript Style Guide

    Updates in v1.0.4

    • cursor option to add custom cursor text
    • cursor css can be customised using cursorClassName

    Install

    npm install --save react-typewriting-effect

    Usage

    import React from 'react'
     
    import { Typewriter } from 'react-typewriting-effect'
    import 'react-typewriting-effect/dist/index.css'
     
    const App = () => {
      return <Typewriter string='This is an example of typewriting 😄' delay={80} />
    }
     
    export default App
    import React from 'react'
     
    import { Typewriter } from 'react-typewriting-effect'
    import 'react-typewriting-effect/dist/index.css'
     
    const App = () => {
      return (
        <Typewriter
          string='In this example, the cursor will stop blinking after ther string is completely rendered'
          delay={80}
          stopBlinkinOnComplete
        />
      )
    }
     
    export default App
    import React from 'react'
     
    import { Typewriter } from 'react-typewriting-effect'
    import 'react-typewriting-effect/dist/index.css'
     
    const App = () => {
      return (
        <Typewriter
          string='In this example, the cursor will be _ and speed will be 50'
          delay={50}
          cursor='_'
        />
      )
    }
     
    export default App

    You can view demo here

    Options

    Name Type Default value Description
    string String String to type out
    delay (speed in v1.0.3) number 100 The delay between each key when typing.
    onComplete Lambda/Function () => {} Function to execute when string is completely typed
    stopBlinkinOnComplete Boolean false Whether to blink cursor after string is typed
    className String '' Field to set classes for the HTML Element
    cursor String ' '
    cursorClassName String undefined Field to set classes for the cursor

    License

    MIT © tanmaylaud

    Install

    npm i react-typewriting-effect

    DownloadsWeekly Downloads

    26

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar