ssbeefeater / react-typed Goto Github PK

I am getting the following error when trying to use it in a React JS project with Typescript

Module not found: Can't resolve 'react-typed'

Hey there! cheers for such an amazing repo!

I would like to know how we are supposed to centre react typed string, I am providing CSS and inline style object but no desired result.

Hey,

I'm puzzled by how to make this.typed.* work with TypeScript, do you have any examples? I think types are missing for these.

Getting these errors:

The containing arrow function captures the global value of 'this'.ts(7041)

Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.ts(7017)

When I attempt to run my tests I get an error: TypeError: Cannot read property 'tagName' of null

It seems to be related to the underlying typed.js library. Would love to fix so I can get clean tests. Any thoughts?

See this issue: mattboldt/typed.js#274

Typing will freeze in the middle of a string, and the cursor will continue to flash for the typing duration. When it finishes processing the string, the entire string will flash briefly, then continue with the next. In the example below, two strings display properly, and the third has the issue.

Using npm version 9.5.1
Using node version v19.8.1
Using react version 18.2.0
Trying to install in project I am met with this error.
Workaround is:
Downgrade react version - npm install react@^16.3.0 or --force

HasmH@HasmH-MacBook-Pro myproject % npm i react-typed
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@"^16.3.0" from [email protected]
npm ERR! node_modules/react-typed
npm ERR!   react-typed@"*" 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! 
npm ERR! For a full report see:
npm ERR! /Users/hasmh/.npm/_logs/2023-05-01T12_54_14_773Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hasmh/.npm/_logs/2023-05-01T12_54_14_773Z-debug-0.log

With the latest release over 2 years ago, I'm wondering whether this project is still active or should be forked and continued somewhere else?

Hi, I would like to change just the style of one word as in:
mattboldt/typed.js#222

How do i do this in react?

he i just install this package but in you package

this react version is getting problem to the user who is using this package please update it to lates or upper version

Hi for some reason this version is breaking all of my styling when i add to banner below i have attached images to show what i am talking about

thank you for reading and helping with this issue(:

It appears there are no type definitions for react-typed, is this something planned for a future release?
If I'm mistaken and there are type definitions, could you point me in the correct direction?

I want to use the static html as in the link below:
https://github.com/mattboldt/typed.js/#strings-from-static-html-seo-friendly

However the current lib doesn't provide that option.

The build process of my Gatsby app fails with the following error under react-typed 1.1.1:

10:22:05 AM:   2 | /*!
10:22:05 AM:   3 |  *
10:22:05 AM:   4 |  *   typed.js - A JavaScript Typing Animation Library
10:22:05 AM: 
10:22:05 AM:   WebpackError: ReferenceError: window is not defined
10:22:05 AM:   
10:22:05 AM:   - react-typed.js:1 Object../node_modules/react-typed/dist/react-typed.js
10:22:05 AM:     [lib]/[react-typed]/dist/react-typed.js:1:343
10:22:05 AM:   
10:22:05 AM:   - bootstrap:19 __webpack_require__
10:22:05 AM:     lib/webpack/bootstrap:19:1
10:22:07 AM: failed during stage 'building site': Build script returned non-zero exit code: 1

Locking it to 1.1.0 builds without any problems.

I have noticed that animation not fully completing if there is a "&" (special character) inside the string/keyword/sentence.

Resolved:
I randomly tried by replacing with text "and" instead of "&" which resolved my strange issue.

Hope it finds helpful to someone.

Cannot use this in my projects due to unsupported react peer dependency :(

Is it possible to change the cursor color, so that the cursor has a different color than the rest of the sentence?

Hello and thank you for creating this package, it's worked great so far. Currently I am trying to use it to render a series of strings that all start with the same letter and loop continuously. It does as I would expect through the array and only backspaces to the first letter, then continues the cycle. On the end of the array it completely backspaces and starts over new, which makes sense, but I was wondering if there was a workaround for this? I would like the first letter to always be there, even at the end of the loop. For my use case it would look better and prevent height issues. Is there a way to do this?

There's a bug when you are building your app for production. It's because you listed styled-components as peerDependency and then, if you use styled-components in your project, you are going to have version mismatch. This issue its listed in styled-component documentation: https://www.styled-components.com/docs/faqs#removing-styledcomponents-from-your-library-bundle

When I follow the instructed on correct from after restarting my react dev system; I'm running into a issue that it's a Uncaught TypeError: Cannot read properties of undefined (reading 'length') within the react-type.js.

1. Do you have any suggestions? That could help.

When animating elements of an array using a loop, startDelay works only for the first element. How can it work for each element of the loop?

<Typed
                            strings={words}
                            typeSpeed={100}
                            backSpeed={60}
                            backDelay={500}
                            startDelay={300}
                            loop >
                            <span style={{ color: "red", fontSize: "3.5rem" }} />
                        </Typed>

It doesn't make sense for us to use this library if we don't use styled-components. It's big dependency to bring in just for the sake of typing text.