wintercore / react-text-transition

Animate your text changes

React-Text-transition

Animate your text changes

Installation

npm install -S react-text-transition

Using the demo

npm run dev

How to use

Example

import React from 'react';
import TextTransition, { presets } from 'react-text-transition';

const TEXTS = ['Forest', 'Building', 'Tree', 'Color'];

const App = () => {
  const [index, setIndex] = React.useState(0);

  React.useEffect(() => {
    const intervalId = setInterval(
      () => setIndex((index) => index + 1),
      3000, // every 3 seconds
    );
    return () => clearTimeout(intervalId);
  }, []);

  return (
    <h1>
      <TextTransition springConfig={presets.wobbly}>{TEXTS[index % TEXTS.length]}</TextTransition>
    </h1>
  );
};

Props

Prop	Type	Default	Definition
direction	String (enum)	0	Used to determine the direction of the transition "up" or "down" (Must be an all-lowercase string).
inline	Boolean	false	Makes the wrapper inline (will auto resize based on contents).
delay	Number	0	Delay the transition of the text (in milliseconds).
springConfig	Object	{ mass: 1, tension: 170, friction: 26 }	react-spring's spring configuration.
className	String	""	Any css classes that you might want to send to the wrapper.
style	React.CSSProperties	{}	Any styles that you might want to send to the wrapper.
children	React.ReactNode	REQUIRED	The react node to be animated
translateValue	string	"100%"	Transform value for determine height animation

---

Detailed Props

inline Boolean

Will simply make the wrapper an inline element and animate its width based on currently showing text, this is useful if you want to show some other static text on the same line.

delay Number

The amount of miliseconds to wait before transitioning.

spring Object

react-spring's Spring configuration (Refer to the configs section) react-spring's spring presets are exposed as presets.

import TextTransition, { presets } from 'react-text-transition';

// in your render method
<TextTransition springConfig={presets.wobbly}>{this.state.text}</TextTransition>;

You have the following presets

• default The default.
• gentle
• wobbly
• stiff
• slow
• molasses

className String

Any css classes that you might want to provide to the wrapper.

style React.CSSProperties

Any css styles that you might want to provide to the wrapper.

NOTE

Feel free to ask any questions about using this component. This plugin requires react +16.8

react-text-transition's Issues

wont update width on visibility change

When TextTransition is not visible on load and will be visible due to window resize it does not update its width and therefore stays invisible -> width: 0px;

SSR support

Hi, I'm using this component in my Gatsby project and found it failed the SSR build since the distributable of this component is an UMD module which contains the window variable.

To fix the issue, I would suggest to set output.globalObject to this in the webpack config; or bring this project upgrading to webpack v5 which should fix this issue by default.

Thank you for a nice component!

Reference:
webpack/webpack#6784

How do I align the text in centre?

I'm using mdbootstrap when I'm trying to align the text to the centre, I cannot override it.

Here's the link to the sandbox,

The text is aligned to the left. The mdbootstrap's text-align class is not working with it.

hydration issue with next

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Call Stack
throwOnHydrationMismatch
node_modules\react-dom\cjs\react-dom.development.js (12507:0)
tryToClaimNextHydratableInstance
node_modules\react-dom\cjs\react-dom.development.js (12520:0)
updateHostComponent
node_modules\react-dom\cjs\react-dom.development.js (19902:0)
beginWork
node_modules\react-dom\cjs\react-dom.development.js (21618:0)
HTMLUnknownElement.callCallback
node_modules\react-dom\cjs\react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
node_modules\react-dom\cjs\react-dom.development.js (4213:0)
invokeGuardedCallback
node_modules\react-dom\cjs\react-dom.development.js (4277:0)
beginWork$1
node_modules\react-dom\cjs\react-dom.development.js (27451:0)
performUnitOfWork
node_modules\react-dom\cjs\react-dom.development.js (26557:0)
workLoopSync
node_modules\react-dom\cjs\react-dom.development.js (26466:0)
renderRootSync
node_modules\react-dom\cjs\react-dom.development.js (26434:0)
performConcurrentWorkOnRoot
node_modules\react-dom\cjs\react-dom.development.js (25738:0)
workLoop
node_modules\scheduler\cjs\scheduler.development.js (266:0)
flushWork
node_modules\scheduler\cjs\scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules\scheduler\cjs\scheduler.development.js (533:0)

React 18 support?

I think something breaks when trying to use with React 18 - the text still changes but there's no animation

Server side support?

Memory leak

I was using the component in a project, but it was causing a memory overflow.

A sample code with higth refresh frequency to check the leak:
`
import React from 'react'
import TextTransition, { presets } from "react-text-transition";

export default class Map extends React.Component {
constructor(props) {
super(props);

    this.state = { 
        data: 9999
    }
}

componentDidMount() {
    this.interval = setInterval(() => this.setState({data: this.state.data + 1}), 500);
}

componentWillUnmount() {
    clearInterval(this.interval);
}

render() {
    const { data } = this.state;
    return (<TextTransition text={`Iteration number: ${data.toString()}`} springConfig={presets.wobbly}/>);
}

}`

Background color CSS does not get applied

The transition text has a background color inside a h1 with a transparent background. The transition text's background color is not being affected by setting it to transparent.
How would I set the <TextTransition> background color to be transparent?

<h1 className={styles.heading}>
    Some text ...
    <TextTransition
      className={styles.transitionText}
      text={ areas[index % areas.length] }
      springConfig={ presets.stiff }
    />
  </h1>

CSS

heading {
  background-color: transparent; // is being applied 
  ...
}

.transitionText {
  background-color: transparent; // is not being applied 
  ...
}

btw cool package and easy to use

How to trigger animate on initial render?

doesn't work with react v18

running npm install -S react-text-transition

gives

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0.1 || ^16.0.1" from [email protected]
npm ERR! node_modules/react-text-loop
npm ERR!   react-text-loop@"^2.3.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2024-02-16T18_13_55_619Z-debug-0.log

Deleted package lock and node modules and still not working

Initial situation is blocking the text

Initial situation (The first time that we see the content)

Adding some styles to fix it

Results

Module not found error ! Not working with nextjs 13

I just installed it and nextjs is throwing the following error

./node_modules/react-text-transition/lib-esm/components/TextTransition.js:13:0 Module not found: Can't resolve 'prop-types'

i am using
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0",

any solution for this?

Letters appear "stuck"

I have used react-text-transition to animate single letters, so a word can appear to transform from one to another. Sometimes the letters appear "stuck," in that they do not fully return to baseline when transitioning from one to another. Like this:

I've tried adjusting parameters of the animation and text styling, but the issue persists. Does anyone know how to prevent this from happening?

"Ghost" Effect

Hi, i wanna know how can i remove the "Ghost" effect in every transition. When the transition happens, a ghosting effect remains

Any idea on how to make the animation trigger on every state change?

So I have a state I'm using to track whether my menu is open, and opening the menu causes the animation to appear. I tried to implement my transition in framer motion but couldn't quite figure it out. I also tried customizing the text transition code to not animate when the text was the same as the previous however my lack of knowledge of react-spring limited me and I was unable to get it to work. How should I go about this?

Style

Hi, when i add this those styles, it not render at it should:

 style={{
          fontSize: "48px",
          fontWeight: "800",
          background: "-webkit-linear-gradient(45deg, #09009f, #00ff95 80%)",
          WebkitBackgroundClip: "text",
          WebkitTextFillColor: "transparent",
        }}

How can i render it the right way?

Heads Up for the example, add an empty array on the useEffect

add an empty array on the second argument for useEffect or it will keep running the effect and life will end (for your browser)

Is it possible to add images to each word?

XSS vulnerability in [email protected]

I've found a Cross-Site Scripting (XSS) vulnerability in this package

Vulnerability Details:

• Severity: High/Critical
• Description: There's a risk of malicious script execution when an adversory controls the text.

Steps to Reproduce:
In a React.js project:

import React from "react";
import TextTransition, { presets } from "react-text-transition";

const App = () => {
    const [index, setIndex] = React.useState(0);

    React.useEffect(() => {
        const intervalId = setInterval(() =>
            setIndex(index => index + 1),
            3000 // every 3 seconds
        );
        return () => clearTimeout(intervalId);
    }, []);

    return (
        <h1>
            <TextTransition
                text={`<img src='' onerror=alert(1)></img>`}
                springConfig={presets.wobbly}
            />
        </h1>
    );
};

export default App

Suggested Fix or Mitigation:
It is best practice to sanitize the text before passing it to innerHTML. Please consider sanitizing it using popular sanitization libraries, e.g., dompurify, to prevent any XSS. Thanks!

Page wide inline default

This may be a stupid question, but is it possible to add a page wide setting to make all TextTransitions inline. It's really just a quality of life update for me.

Not compatible with react-spring

It gives an error with react-spring

`node_modules/react-spring/node_modules/@react-spring/web/dist/esm/index.js
SyntaxError: node_modules/react-spring/node_modules/@react-spring/web/dist/esm/index.js: Missing class properties transform.

1 | import{Globals as M}from"@react-spring/core";import{unstable_batchedUpdates as N}from"react-dom";import{createStringInterpolator as U,colors as D}from"@react-spring/shared";import{createHost as H}from"@react-spring/animated";var k=/^--/;function I(t,e){return e==null||typeof `

Add support for Typescript

An index.d.ts file can be added to make this package work with React apps in Typescript.

Placeholder width doesn't take `fontSize` into account

User Story

I tried adding a fontSize to the style and className properties but they don't update the width of the transition text.

In the screenshot below, the large text overlaps other elements because the width is not updated from the given styles.

Solution

Adding the same fontSize to the .placeholder span fixes the issue, since the transition text grabs its width from the placeholder text when the inline prop is true.

https://github.com/WinterCore/react-text-transition/blob/master/src/components/TextTransition.js#L50

To Reproduce

With style

<TextTransition
  inline
  overflow
  style={{ fontSize: '86px', }}
  text="Foo Bar"
/>

With className

/**
 * styles.css
 */
.transition-text {
  font-size: 86px;
}

/**
 * index.jsx
 */
<TextTransition
  className="transition-text"
  inline
  overflow
  text="Foo Bar"
/>

Do v2 & v3 still support React 17?

It seems that now a dependency conflict arises if React 18 isn't used yet.

centering text causes unwanted movement

Is there a good way to center text, I am using flex and justify content on parent div, which causes to upcoming text to center itself on beginning of animation causing previous text to indent badly

Custom colors for each text on load

I want to suggest an improvement feature:

Each text can have color props too as we have a text prop.

How to render a space

Hi support team,

Could you guide me on how to render a space?

import ReactTextTransition from "react-text-transition";

{"Please, wait...".split("").map((character, index) => {
  return <ReactTextTransition
    className="loading"
    delay={index * 70}
    direction="up"
    inline
    key={index}
    noOverflow
    text={character} />
})}

The code above displays:

Please,wait...

Thanks for your support!

Choppy interaction when resizing window

Resizing the window when there's an instance in the viewport isn't smooth and chops pretty severely.

Overflow setting inverted

Overflow true removes the overflow: hidden element, documentation makes it seem it would act the other way around.

Install against React 16 causes incorrect peer dependency warning

yarn install:

warning " > [email protected]" has incorrect peer dependency "react@^15.0.1"

package.json:

"react": "^16.8.4",
"react-text-transition": "^0.1.6",

componentWillReceiveProps has been renamed, and is not recommended for use

Hi, nice component =)

You are still using componentWillReceiveProps and React is printing the following warning:

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

Thank you!