wintercore / react-text-transition Goto Github PK

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?

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",

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?

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

Adding some styles to fix it

Results

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

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!

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

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.

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

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

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"
/>

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!

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?

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?

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}/>);
}

}`

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.

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

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)

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

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

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

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 `

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

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

I want to suggest an improvement feature:

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

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;

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

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!