Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Select Alternate Cursor Styles #49

Open
isaacsheyliger opened this issue Jan 14, 2024 · 1 comment
Open

Feature Request: Select Alternate Cursor Styles #49

isaacsheyliger opened this issue Jan 14, 2024 · 1 comment

Comments

@isaacsheyliger
Copy link

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
Copy link
Owner

maxeth commented Jan 14, 2024

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']}
/>;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants