wintercore / react-text-transition Goto Github PK
View Code? Open in Web Editor NEWAnimate your text changes
License: MIT License
Animate your text changes
License: MIT License
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.
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
style
<TextTransition
inline
overflow
style={{ fontSize: '86px', }}
text="Foo Bar"
/>
className
/**
* styles.css
*/
.transition-text {
font-size: 86px;
}
/**
* index.jsx
*/
<TextTransition
className="transition-text"
inline
overflow
text="Foo Bar"
/>
An index.d.ts
file can be added to make this package work with React apps in Typescript.
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)
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?
It seems that now a dependency conflict arises if React 18 isn't used yet.
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?
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
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.
add an empty array on the second argument for useEffect or it will keep running the effect and life will end (for your browser)
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
I've found a Cross-Site Scripting (XSS) vulnerability in this package
Vulnerability Details:
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!
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?
I want to remove the fading effect of the previous element here and remove the default bouncy type effect as well. All the effects look like woobly effect, i want none in my ui case.
I want to suggest an improvement feature:
Each text can have color props too as we have a text prop.
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}/>);
}
}`
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",
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
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?
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.
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 `
I think something breaks when trying to use with React 18 - the text still changes but there's no animation
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:
Thanks for your support!
Hi, nice component =)
You are still using componentWillReceiveProps and React is printing the following warning:
Thank you!
Overflow true removes the overflow: hidden element, documentation makes it seem it would act the other way around.
Resizing the window when there's an instance in the viewport isn't smooth and chops pretty severely.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.