jstejada / react-typist

Typing animations with React
https://jstejada.github.io/react-typist/
Other
1.4k stars 124 forks source link

curso for block element doesn't work properly #110

Open amirho1 opened 3 years ago

amirho1 commented 3 years ago

The typist's cursor doesn't work properly when it has a block element i.e H1 it goes to one line bottom

import "./Home.scss";
import React from "react";
import Typist from "react-typist";

export default function Home() {
  return (
    <div className="home page">
      <Typist>
        <h1 style={{ display: "inline" }}>
          Testing <b style={{ color: "#7a5bf5" }}>Typist</b> inside an Inline
          element
        </h1>
      </Typist>

      <Typist>
        <h1 style={{ marginTop: "2em" }}>
          Testing <b style={{ color: "#7a5bf5" }}>Typist</b> inside a Block
          element
        </h1>
      </Typist>
    </div>
  );
}

Screenshot from 2021-06-16 10-39-14

LCSLITX commented 3 years ago

I'm also struggling with it. Did you find any solution?

You could check issue #82. I used a temporary solution just setting CSS property of block elements to inline-block and then used line-breaks to write on a new line.

softmarshmallow commented 3 years ago

Related #116