braposo / react-text-loop Goto Github PK

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!

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?

If the is aligned in the center i.e. text-align: center; the transition acts abnormally.

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.

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 sections 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:

1. Add two TextLoop components to a page.
2. Set a delay on one of them to offset their transitions to be separated from each other.
3. Navigate to another tab.
4. Wait for a dozen seconds or so.
5. Navigate back

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.

Similarly to what was done for react-responsive-picture we should export ES6, CommonJS and UMD modules so it can be used anywhere.

👋
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?

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.

### 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>

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 (

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.

chenglou/react-motion#569

why not trying using this library instead? https://github.com/react-spring/react-spring

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?

Working nicely with react 16.7.

I think this is a false alarm

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?

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

             ...

        });
 };

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

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 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?

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?

Seems an interesting alternative to react-motion. It could be easier to customise than relying on spring parameters like react-motion.

https://github.com/tannerlinsley/react-move

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:

1. Starting the loop when someone scrolls to that section of the page.
2. Using it for two words in the same sentence where I'd ideally want them to scroll at different times and not together. Right now, I am varying the speed, but delay seems like an ideal prop for that.

Thoughts?

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.

Hey guys, is there a way to not loop the text? Just go through the array and stop?

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.

Hi all- any versions to support React 17 or 18?

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"

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.

Plase Help me

Module not found: Error: Can't resolve 'cxs' in 'C:\mypath\node_modules\react-text-loop\es\components'

Hi all- any versions to support React 18?

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

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.

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.

Would you mind if I started by adding in some basic tests?

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 :)

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