Cursor Color Change?

[shashankdatta]

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

[maxeth]

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]

I see! Thank you so much! Also, how would you add inline span styling to the content that will be typed out?

On Tue, Jun 13, 2023 at 10:05 PM maxeth @.***> wrote:

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.

— Reply to this email directly, view it on GitHub https://github.com/maxeth/react-type-animation/issues/29#issuecomment-1589659002, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQKBP2USBHWZUUZH3KAMP7DXLCJF3ANCNFSM6AAAAAAZE63CVQ . You are receiving this because you authored the thread.Message ID: @.***>

-- Best regards, Bezgam, Shashank datta. -----------------------

Computer Science Class of 2023

@. @.> | (804) 956-9265 Ideation I Developer I Restorative I Empathy I *Strategic

[maxeth]

@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]

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

[shashankdatta]

Hey,

I meant something like this:

<TypeAnimation sequence={[ <span className={styles["intro-title"]}> {"hi, "} <span className={styles["intro-name"]}>{"shashank datta"} {" here."} , 2000, "", ]} wrapper="span" cursor={true} speed={{ type: "keyStrokeDelayInMs", value: 120 }} preRenderFirstString={true} className={styles.type} repeat={Infinity} />

Here the sequence doesn't seem to be typing out as expected. Any suggestions? Thank you for your quick responses! Best regards, Bezgam, Shashank datta. -----------------------

Computer Science Class of 2023

@. @.> | (804) 956-9265 Ideation I Developer I Restorative I Empathy I *Strategic

On Tue, Jun 13, 2023 at 10:33 PM maxeth @.***> wrote:

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

— Reply to this email directly, view it on GitHub https://github.com/maxeth/react-type-animation/issues/29#issuecomment-1589702858, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQKBP2SCNR5HD32O5QWDAHDXLCMOHANCNFSM6AAAAAAZE63CVQ . You are receiving this because you were mentioned.Message ID: @.***>

[maxeth]

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

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