maxeth / react-type-animation

A React typewriter animation based on typical with extended functionality and customization.
https://react-type-animation.netlify.app/
MIT License
391 stars 24 forks source link

Feature Request: Select Alternate Cursor Styles #49

Open isaacsheyliger opened 8 months ago

isaacsheyliger commented 8 months ago

I was looking for a way to simulate a command line style animation and came across this package that looks great, however the cursor uses the standard vertical line style, it would be a very useful addition to be able to specify either a block or underscore cursor as well.

Looking at the code it seems like an update to the cursor prop to accept a specified type instead of a boolean would be the way to go, but I'm not too familiar with Typescript.

maxeth commented 8 months ago

Hey,

did you take a look at this section? https://react-type-animation.netlify.app/options#custom-cursor-animation

You could maybe do something like this

.type::after {
  content: '_';
  animation: cursor 1.1s infinite step-start;
}

@keyframes cursor {
  50% {
    opacity: 0;
  }
}
import './yourGlobalCssFile.css';

<TypeAnimation
  cursor={false} // omit the default css typing animation class
  className="type" // pass custom class name from above to apply the custom cursor style/animation
  sequence={['One', 800, 'One Two']}
/>;