maxeth/react-type-animation

Cursor Color Change?

Closed this issue · 6 comments

shashankdatta commented

How do I change only the cursor color? Could please add a "cursorClassName" field?

maxeth commented

Hey,

the cursor is fully customizable via CSS as shown in the docs: https://react-type-animation.netlify.app/options#custom-cursor-animation (On that page you can select CSS Modules, basic CSS and styled-jsx to see how to replace the default animation depending on what you use)

Changing Cursor Color

For example, if you use basic global CSS you can change the cursor color to red like this:

yourGlobalCssFile.css

.type::after {
  content: '|';
  color: red; /* <---- this is what you're looking for: set a custom cursor color */
  animation: cursor 1.1s infinite step-start;
}
 
@keyframes cursor {
  50% {
    opacity: 0;
  }
}

YourReactComponent.tsx

import './yourGlobalCssFile.css';
 
<TypeAnimation
  cursor={false} // omit the default css typing animation class
  className="type" // pass your custom class
  sequence={['One', 800, 'One Two']}
/>;

Could please add a "cursorClassName" field?

I may add this to the example page, but I don't think adding a new property for all sorts of CSS rules is a good approach. It would just unnecessarily increase the bundle size for those who don't need those styles, and you can apply any kind of styles/variations via custom CSS.

shashankdatta commented
maxeth commented

@shashankdatta

You can set a custom wrapper, but the default is already span, which is inline by default, or am I misunderstanding your question?

<TypeAnimation
  wrapper="span"
  sequence={['One', 800, 'One Two']}
/>;

But generally, you can either include a .type class selector in the CSS example I posted previously...

.type {
display: inline;
}

or or a jsx style object...

<TypeAnimation
  style={{display:"inline"}}
  sequence={['One', 800, 'One Two']}
/>;

to add any other custom styles.

maxeth commented

But doing display: inline may cause a layout shift. Check: https://react-type-animation.netlify.app/wrapper-css

shashankdatta commented
maxeth commented

@shashankdatta The docs state that this isn't supported.

Check this out instead https://www.npmjs.com/package/react-typing-animation