braposo / react-text-loop Goto Github PK
View Code? Open in Web Editor NEWAnimate words in your headings
Home Page: https://codesandbox.io/s/react-text-loop-playground-br4q1
License: MIT License
Animate words in your headings
Home Page: https://codesandbox.io/s/react-text-loop-playground-br4q1
License: MIT License
Similarly to what was done for react-responsive-picture we should export ES6, CommonJS and UMD modules so it can be used anywhere.
Due to the use of react-motion, this library have issue with the componentWillReceiveProps warning and might be deprecated in a further version of react.
I suggest to enhance the project to avoid using react-motion that seems an abandonned project. See below the link of the issue on react-motion that haven't been fix.
why not trying using this library instead? https://github.com/react-spring/react-spring
Seems an interesting alternative to react-motion
. It could be easier to customise than relying on spring parameters like react-motion
.
I currently get this warning in react:
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
It seems that react 17 is not supported. This causes some problems due to the peer dependency change in npm 7.
Is this up for grabs?
After doing #9 we can have a better README with badges and a more consistent template across our open-source projects.
A good example is https://gist.github.com/PurpleBooth/109311bb0361f32d87a2
This would allow us to have a specific viewport that would not display the full extent of the in/out animation. A bit like a slot machine effect, which could easily be achieve by just having an overview:hidden
parent div.
I tried to set the text as center, the words isn't the same length. So it's bugging out like this :
This is my code right now.
<TextLoop delay="500" fade="false">
<p className="text-5xl lg:text-7xl bg-gradient-to-b text-transparent bg-clip-text from-om-green-600 to-om-green-50 pb-4">Education</p>
<p className="text-5xl lg:text-7xl bg-gradient-to-b text-transparent bg-clip-text from-om-green-600 to-om-green-50 pb-4">Proficiency</p>
<p className="text-5xl lg:text-7xl bg-gradient-to-b text-transparent bg-clip-text from-om-green-600 to-om-green-50 pb-4">Ingenuity</p>
<p className="text-5xl lg:text-7xl bg-gradient-to-b text-transparent bg-clip-text from-om-green-600 to-om-green-50 pb-4">Competance</p>
<p className="text-5xl lg:text-7xl bg-gradient-to-b text-transparent bg-clip-text from-om-green-600 to-om-green-50 pb-4">Literacy</p>
</TextLoop>
// fyi : the text center is in the top div
Hope I could get any helps, thanks!
Hey guys, is there a way to display more than one text item, like displaying the previous items and the next items in the loop at the same time?
For example, I have a list of text items and I want to show five at any given time. The middle one would be the current one, the top two would be the previous two and fading out at different stages, and the bottom two would the be the next in the list and fading in at different stages.
👋
I'm using react-text-loop to display large title that needs to be wrapped within container. I dont add any text after that.
How can I constrain component width so that it doesn't grow over a certain width?
I followed the simple example and the transition effects look weird. There is a lot of bouncing around and the text looping from different directions. Not sure if this is a bug or the intended design. Is there any possible way to dampen this effect and make it come from one direction only in a "plain old boring way"
Currently we use text: this.props.options[this.state.currentWord]
to loop through the text but it would be better to loop through the children instead so we could have them styled independently. I think we could just do this.options = React.Children.toArray(this.props.children)
to make it work, but might need further testing.
The API would have to change from:
<TextLoop
options={[
"Trade faster",
"Increase sales",
"Stock winners",
"Price perfectly",
]}
initialWidth={187}
height={43}
/>
to:
<TextLoop
initialWidth={187}
height={43}
>
<span>Trade faster</span>
<Heading1>Increase sales</Heading1>
<span>Stock winners</span>
<Heading2>Price perfectly</Heading2>
</TextLoop>
I think this approach makes it more flexible for future use (imagine someone wanting to change the style of the text according to its meaning), what do you think?
Hi @braposo, while using this library I found myself wanting to animate the characters in sequence rather than the whole word. A good example can be found on first fold of https://3dro.ps.
Thoughts on if and how that is something that could be a part of this library?
Hey guys, is there a way to not loop the text? Just go through the array and stop?
Having some issues with the scroll on mobile. It's very fidgety on the pages that have react-text-loop active.
The application is built on gatsby.
Bug only appears to be present on mobile. Im using chrome on mobile.
Can we have independent speeds for each child? For example:
<h2>
<TextLoop speed="1000">
<span speed="2000">I stick around for 2 seconds!</span>
<span>I just default to 1 second</span>
</TextLoop>
</h2>
This way I can set a default speed value on the TextLoop but also specify individual speeds on each child.
Hi @braposo! Thank you for creating this library - it's really cool! Wondering if you'd consider adding a prop for delay
?
My usecase is twofold:
delay
seems like an ideal prop for that.Thoughts?
Plase Help me
Module not found: Error: Can't resolve 'cxs' in 'C:\mypath\node_modules\react-text-loop\es\components'
First of all, thank you for this wonderful component! Secondly, I've noticed an issue with Safari (Version 14.0 (16610.1.21.1.2)) and Chrome (Version 84.0.4147.135 (Official Build) (64-bit)) using 2.3.0
.
I have two separate section
s that contain a TextLoop
each. One has a delay and the other doesn't. Their transition at first, works fine. However, when one switches to another tab, waits a dozen seconds or so and navigates back, their transitions end up synchronising and happen concurrently.
Steps to reproduce:
TextLoop
components to a page.delay
on one of them to offset their transitions to be separated from each other.Expected results:
I'm not sure if the intended behaviour is already that the timers should pause when one navigates away from the tab, but perhaps that would be a good solution?
Again, thank you for your work on this component; it's an absolute joy to use.
Hi all- any versions to support React 18?
Hey, loving this little component.
Would be great if we could change the direction so that items don't always slide down. Sometimes I want them to slide up.
I poked around the props you expose and doesn't look like this is possible right now.
Please fix when possible and thank you for the awesome software:
ReferenceError: window is not defined
at ./node_modules/react-text-loop/lib/utils.js:9:3
Would you mind if I started by adding in some basic tests?
When the animation is turned on, the text breaks out of the containing div as a single line, regardless of any max-width or width style constraints placed upon the containing div.
This block of code in the readme uses a <Link/>
and <BodyText/>
component of unknown origin. I suggest replacing them with standard html tags
import TextLoop from "react-text-loop";
class App extends Component {
render() {
return (
<h2>
<TextLoop>
<span>First item</span>
<Link to="/">Second item</Link>
<BodyText>Third item</BodyText>
</TextLoop>{" "}
and something else.
</h2>
);
}
}
This component is amazing.
However, I believe it may have a memory leak.
How I'm using it:
I created a react component as follows:
import React from 'react';
import TextLoop from 'react-text-loop';
const BuiltForBlock = ({
builtFor,
A,
B,
C,
D,
E
}) => (
<h2 className='title animated-main' style={{ color: builtFor.color }}>
<span> {builtFor.text} </span>
<TextLoop springConfig={{ stiffness: 80, damping: 10 }}>
<span style={{ color: `${A.color}` }}>
{A.text}
</span>
<span style={{ color: `${B.color}` }}>{B.text}</span>
<span style={{ color: `${C.color}` }}>{C.text}</span>
<span style={{ color: `${D.color}` }}>{D.text}</span>
<span style={{ color: `${E.color}` }}>
<strong>{E.text}</strong>
</span>
</TextLoop>
</h2>
);
BuiltForBlock.defaultProps = {
A: { color: 'red', text: 'A' },
B: { color: 'blue', text: 'B' },
C: { color: 'green', text: 'C' },
D: { color: 'purple', text: 'D' },
E: { color: 'orange', text: 'E' },
builtFor: { color: 'white', text: 'Built For' }
};
export default BuiltForBlock;
Then within another component, I have this one.
However, when switching pages on my react app, I believe it is unmounting mid-transition and not properly closing everything out?
If it is a memory leak, that could be a real issue worth looking into and was hoping to get some insight on how to properly unmount it or call your attention to it to fix.
Cheers :)
It would be nice to have something like that for words change action:
textChange(textLoopState){
// do something...
}
<TextLoop onChange={textChange}>
{wordsObj}
</TextLoop>
My proposal:
// TextLoop.jsx
tick = () => {
this.setState((state, props) => {
+ if(this.props.onChange){
+ this.props.onChange(state);
+ }
...
});
};
The content in cannot be changed based on changes in hooks data,such as
const [numsList, setNumsList] = useState([4]);
useEffect = (() => {
const nums = [1, 2, 3];
setNumsList([...nums]);
},[])
{numsList.map((item: any, index: number) => {
return (
If the is aligned in the center i.e. text-align: center; the transition acts abnormally.
Hi all- any versions to support React 17 or 18?
Working nicely with react 16.7.
I think this is a false alarm
### I try to use it this way in my react application. But it doesn't work. Please help anyone. It is so essential for me.
import TextLoop from "react-text-loop";
<div>
<TextLoop interval={100} springConfig={{ stiffness: 180, damping: 8 }}>
<span>Text1</span>
<span>Text2</span>
<span>Text3</span>
</TextLoop>
</div>
Firstly, thanks for the amazing lib!
I'm trying to achieve some like that:
const ValueItems = () => ( <React.Fragment> ... </React.Fragment> )
<TextLoop interval={4500} adjustingSpeed={300}> <ValuesItems /> </TextLoop>
As ValueItems is used in some places, it makes sense to me to create a component for that, however, to have the use ValueItems in TextLoop is not possible because it's wrapped with <React.Fragment>. The just check one level deep in the children nodes which I understand, however, I think that React.Fragments should be an exception to the rule as Fragments is intended to not be a node, but just a wrapper.
What are your thoughts?
Hi, I have recieved this warning:
componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
* 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
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: TransitionMotion
It seems that this is related to this issue in react-motion
.
That issue is active these days and may resolve soon.
Please consider updating the dependencies, whenever that issue resolved.
Hi,
Great package btw!
I'm having some issues with rendering when it comes to async data.
I'm trying to render the following:
const InfoDisplay = () => {
const [data, setData] = useState({});
useEffect(() => {
async function fetchInfo() {
const result = await axios
.get(`${API_URI}/info`)
.then((resp) => resp.data)
.catch((err) => [{
error: err.response,
}]);
setData(result);
}
fetchInfo();
}, []);
return (
<>
<TextLoop>
{
Object.keys(data).map((index) => {
return <InfoDisplayItem key={index} data={data[index]} />
})
}
</TextLoop>{" "}
</>
);
};
But nothing shows. However when I either remove the <TextLoop><TextLoop>
or just use some of the examples given in the README I see stuff rendering. Any ideas why async data won't render?
const GradientSpan = styled.span`
background-image:linear-gradient(60deg, #d23c69, #ffc850);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
`;
<TextLoop>
<GradientSpan>this g is cut below1</GradientSpan>
<GradientSpan>this g is cut below2</GradientSpan>
</TextLoop>
The gradient style applied to these spans via styled-components is cut at the bottom. That means, whenever characters are reaching down, the text will be cut of at the buttom when a gradient is set. Without setting the gradient, making it plain color text, it displays correctly.
Setting mask to false doesn't fix that.
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.