react-ityped is a react component that wraps https://www.npmjs.com/package/ityped package

🕺 Install

by using npm:

$ npm i react-ityped 

by using yarn:

$ yarn add react-ityped

⚜️ How does react-ityped looks like?

☕️ Features

Original ityped package already has support for React applications. But it uses DOM directly with html-id.

This situation might be appropriate for react applications that doesn't use Reach Hook API. But if you're using react v16.8 or higher, you should use useRef hook instead of direct DOM access.

What do I mean?

This example has taken from ityped package.

If you want to check. link

import React, { Component } from 'react'
import { init } from 'ityped'

export default class Hello extends Component {
    componentDidMount() {
        const myElement = document.querySelector('#myElement')
        init(myElement, { showCursor: false, strings: ['Use with React.js!', 'Yeah!'] })
    }
    render() {
        return <div id="myElement"></div>
    }
}

With useRef() hook, we don't require to specify any id on our component. useRef() hook does it for us.

In this regards react-ityped uses useRef() hook to access native DOM element.

🎆 Example

import React from 'react';
import ITyped from 'react-ityped';
import './index.css';

const Example = () => {

    const strings = ['react-ityped', 'is a', 'react component', 'that wraps npm ityped package.']

    return (
        <ITyped className='container ityped-cursor'
            showCursor={false}
            strings={strings}
            typeSpeed={50}
            backSpeed={50}
            startDelay={100}
            backDelay={250}
        />
    );
}

export default Example;

If you want to check more detail about styling, check that link

// index.
.ityped-cursor {
    font-size: 2.2rem;
    opacity: 1;
    -webkit-animation: blink 0.3s infinite;
    -moz-animation: blink 0.3s infinite;
    animation: blink 0.3s infinite;
    animation-direction: alternate;
}

@keyframes blink {
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes blink {
    100% {
        opacity: 0;
    }
}

@-moz-keyframes blink {
    100% {
        opacity: 0;
    }
}

.container {
    text-align: left;
    font-size: 25px;
    align-self: center;
    margin-left: 3%;
    margin-top: 3%;
}

🔧 Props

Common props you may want to specify include:

Name	Type	Discription	Default
strings	string[]	An array with the strings that will be animated	['Put your strings here...', 'and Enjoy!']
cursorChar	string	Character for cursor	`"
typeSpeed	number	Type speed in milliseconds	100
backSpeed	number	Type back speed in milliseconds	50
startDelay	number	Time before typing starts	50
backDelay	number	Time before backspacing	500
loop	boolean	The animation loop	false
showCursor	boolean	Show the cursor element	true
disableBackTyping	boolean	Disable back typing for the last string sentence	false

See the props documentation for complete documentation on the props that react-ityped supports.

📦 Build

• Rollup for build process
• Babel for transpilation

📜 License

MIT © Enes Usta