Categories
React Answers

How to use react-typed in our React app?

Spread the love

To use react-typed in our React app, we run

yarn add react-typed      

with yarn

or

npm install react-typed --save

with npm.

Then we write

import React, { Component } from "react";
import { render } from "react-dom";
import Typed from "react-typed";

class MyComponent extends Component {
  render() {
    return (
      <div>
        <Typed strings={["Here you can find anything"]} typeSpeed={40} />
        <br />

        <Typed
          strings={[
            "Search for products",
            "Search for categories",
            "Search for brands",
          ]}
          typeSpeed={40}
          backSpeed={50}
          attr="placeholder"
          loop
        >
          <input type="text" />
        </Typed>
      </div>
    );
  }
}

render(<MyComponent />, document.getElementById("app"));

to create a component that uses the Typed property from react-typed.

We add the strings that we want to type out into the strings prop array.

And we set the typeSpeed and backSpeed to set the typeing speed and backspace speed.

loop makes the typing effect loop.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.