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

    react-simple-typewriter
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.13 • Public • Published

    React Simple Typewriter

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

    NPM JavaScript Style Guidenpm bundle sizeGitHub

    screenshot

    Install

    # npm 
    npm i react-simple-typewriter
     
    # Yarn 
    yarn add react-simple-typewriter

    Usage

    import React from 'react'
     
    import Typewriter from 'react-simple-typewriter'
    import 'react-simple-typewriter/dist/index.css'
     
    export default function App() {
      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
                loop
                cursor
                cursorStyle='_'
                typeSpeed={70}
                deleteSpeed={50}
                delaySpeed={1000}
                words={['Eat', 'Sleep', 'Code', 'Repeat!']}
              />
            </span>
          </h1>
        </div>
      )
    }

    Available Props

    Prop Type Description Default
    loop Boolean Repeat the typing effect (true if present) false
    cursor Boolean Show / Hide cursor (show if present) false
    cursorStyle String Change the cursor style |
    typeSpeed Integer Speed in Milliseconds 100
    deleteSpeed Integer Word deleting speed in Milliseconds 50
    delaySpeed Integer Delay after the word is written in Milliseconds 1500
    words Array Array of strings holding the words -

    Demo

    codeSandbox

    License

    MIT © awran5

    Install

    npm i react-simple-typewriter

    DownloadsWeekly Downloads

    78

    Version

    1.0.13

    License

    MIT

    Unpacked Size

    20.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar