jstejada / react-typist Goto Github PK
View Code? Open in Web Editor NEWTyping animations with React
Home Page: https://jstejada.github.io/react-typist/
License: Other
Typing animations with React
Home Page: https://jstejada.github.io/react-typist/
License: Other
Description
I have tried to add emoji to labels that I want to type via Typist and they are rendered okay. However, while backspacing is removing emoji, they are rendered like an unknown char symbol for a second before removing from the screen.
<Typist>
<p>Test <span className="emoji">๐ </span></p>
<Typist.Delay ms={1000} />
<Typist.Backspace count={16} delay={1000} />
<p>Test 2 <span className="emoji">๐๐๐๐</span></p>
<Typist.Delay ms={500} />
<Typist.Backspace count={21} delay={1000} />
<p>Test 3 <span className="emoji">๐น</span></p>
</Typist>
Expected Result
Emoji is backspacing without showing the unknown char symbol like other chars.
Actual Result
Emoji is backspacing with showing the unknown char symbol:
Is there a way to customize how fast the Backspace Component deletes the text? I want to only change the speed of the backspacing, not the typing-speed.
First off, thank you for the component. It is amazing. Suggestion. When the typing is complete, and disappear is enabled, instead of vanishing fast I think the cursor should also give the option of a fade and animation duration.
No errors are thrown, but the component never renders anything, even with the most basic use case of <Typist>Some words to type.</Typist>
Switching back to 15.6.2 resolves the issue.
thank you for the typist module!
today, i have noticed a deprecation notice whenever i run test (using jest
):
console.warn node_modules/react-dom/cjs/react-dom.development.js:11494 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks 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: Cursor
here is my system information:
$ npm ls react react-dom react-typist
[email protected] /Users/foo/react
โโโ [email protected]
โโโ [email protected]
โโโ [email protected]
$ node --version
v12.11.0
$ npm --version
6.11.3
i wanted to bring this to your attention before the module will break with never version of react.
for instance, componentWillReceiveProps()
is used in Crusor.jsx
.
thank you again.
The cursor is appearing on the next line, and not on the current one.
I'll place the code here:
<Typist>
<div className="weather-title">
<h3>title</h3>
<div className="p-holder">
<p>
another text
</p>
<p>
another text
</a>?
</p>
<p>
text
</p>
</div>
</div>
</Typist>
How to include the 'dist/Typist.css' on Dev and Production
Hello,
I have been playing with your module, and I have come across an issue. I am trying to create a dynamically changing header component that will change the string of the header every 4 seconds. I am able to get tags to change dynamically just fine with my component, but using typist I get the first prop (beginning of an array of strings) and then it does not receive the next props.
I did notice in your module, you do not have componentWillReceiveProps(nextProps)
and this may be the reason it is not changing when a new prop is rendered. I'm honestly not really sure, wondering if I could get your input.
Thanks.
Hello,
My React
is pre-rendered on the server, and when I try to use react-typist
I get this error on the server:
ReferenceError: window is not defined
[1] at new Typist (/Users/user/myapp/node_modules/react-typist/dist/Typist.js:146:41)
[1] at ReactCompositeComponentMixin.mountComponent (/Users/user/myapp/node_modules/react/lib/ReactCompositeComponent.js:148:18)
[1] at wrapper [as mountComponent] (/Users/user/myapp/node_modules/react/lib/ReactPerf.js:66:21)
[1] at Object.ReactReconciler.mountComponent (/Users/user/myapp/node_modules/react/lib/ReactReconciler.js:37:35)
[1] at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/user/myapp/node_modules/react/lib/ReactMultiChild.js:241:44)
[1] at ReactDOMComponent.Mixin._createContentMarkup (/Users/user/myapp/node_modules/react/lib/ReactDOMComponent.js:591:32)
[1] at ReactDOMComponent.Mixin.mountComponent (/Users/user/myapp/node_modules/react/lib/ReactDOMComponent.js:479:29)
[1] at Object.ReactReconciler.mountComponent (/Users/user/myapp/node_modules/react/lib/ReactReconciler.js:37:35)
[1] at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/user/myapp/node_modules/react/lib/ReactMultiChild.js:241:44)
[1] at ReactDOMComponent.Mixin._createContentMarkup (/Users/user/myapp/node_modules/react/lib/ReactDOMComponent.js:591:32)
Any idea what I can do to avoid this issue?
I'm using typist to generate a typed effect title for a website.
However, I have multiple lines of text and each time a line break occurs, the text that has already been typed it pushed upward (see gif).
Can this be stopped and can the new line of text appear below the previously typed text. I have seen it done before but cannot replicate it (like this).
My JS:
export default class TypistTitle extends Component {
render() {
return (
<Typist>
<div className="main_title">
Lorem ipsum dolor gentrify fam bespoke
<br />
Pork belly church-key snackwave tbh, subway tile tumeric
<Typist.Backspace count={20} delay={200} />
<br />
Brooklyn woke cliche farm-to-table. YOLO salvia 8-bit
</div>
</Typist>
)
}
}
My CSS:
.main_title {
font-family: "Open Sans", sans-serif;
font-size: 3em;
font-weight: 200;
margin-left: 3vw;
}
I have been using the module on my local machine and everything works perfectly.
However, when I moved to production, Typist.Backspace & Typist.Delay have completely stopped working.
I mean that the text will just be added to the previous one, without any rythme change.
The output is just one big string
<Typist onCharacterTyped={this.someFunction} avgTypingDelay={150} startDelay={1000} >
FOO
<Typist.Backspace count={30} delay={3000}/>
<Typist.Delay ms={3000} />
BAR
</Typist>
//FOOBAR
If it can be any indicator, I noticed that on localhost when the Typist.Backspace
occurs, this happens:
someFunction = (char, charIndex) => {
console.log(char) // BACK (+ a right arrow on top)
};
But nothing is logged when in production.
Any idea what I am getting wrong?
Thanks
Are welcome the pr?
I've encountered some issues working with react-typist :
โข It doesn't work if you use react-intl with <FormattedMessage/>
tags (the text isn't written).
โข It works fine if you use instead {formatMessage()}
inside the <span>
tag but.. as soon as the text is written, you'd have to reload the page to translate it either way it won't (and you have then some text in one language and what's left in a second one..). Not that pretty :/
Anyway to correct this ? I'm not saying I use it perfectly cause I'm quite new to react and react-intl but I'm posting this just so you're aware of these issues (and in case someone has a solution) ๐
Anyway, your solution if pretty neat and useful.
using react 15.4, I get an error only in safari.
TypeError: 'undefined' is not a function (evaluating 'Array.from(arr)')
GoTo https://jstejada.github.io/react-typist/ in safari to duplicate the error
What are the supported browsers? Could this information be added to the Readme maybe?
I am seeing issues with IE11. You are using the static array methods that are not supported by IE11. Any plans on supporting IE11?
Dependencies:
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.7.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.8.3",
"react-hot-loader": "^4.0.1",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {
"@fortawesome/fontawesome": "^1.1.5",
"@fortawesome/fontawesome-free-brands": "^5.0.9",
"@fortawesome/fontawesome-free-solid": "^5.0.9",
"@fortawesome/react-fontawesome": "0.0.18",
"bootstrap": "^4.0.0",
"classnames": "^2.2.5",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-router-dom": "^4.2.2",
"react-transition-group": "^2.3.0",
"react-typist": "^2.0.4",
"reactstrap": "^5.0.0-beta.3",
"styled-components": "^3.2.5"
}
Code sample:
<Typist
cursor={{ element: '_' }}
startDelay={1000}
>
Example
<Typist.Backspace count={3} delay={500} />
</Typist>
Expected Behavior:
It should write Example
then backspace to Exam
.
Current Behavior
Doesn't backspace at all. Same thing happens with Typist.Delay
, doesn't work.
I took a brief look at the code but didn't find the issue.
Hey there!
It would be awesome if we could make react-typist play nice with ink. Currently, the text blinks crazy while Typist is animating.
If you guys point me on some direction, I could try and work on pull-requests...
at cloneElement (Typist.js:1831)
at cloneElementWithSpecifiedTextAtIndex (Typist.js:1856)
at Object.cloneElementWithSpecifiedText (Typist.js:1876)
at Typist.render (Typist.js:402)
at finishClassComponent (react-dom.development.js:15119)
at updateClassComponent (react-dom.development.js:15074)
at beginWork (react-dom.development.js:16064)
when using something like
<Typist>
<React.Fragment>
text
<Typist.Backspace count={4} delay={delay} />
</React.Fragment>
</Typist>
Basically, when you apply this component to a centered string of text, its shifts the already-typed text to the left, as you're typing on the right. This makes the text hard to read.
Is it possible to have the text placement static on centered text? I.e. it starts typing on the left of the screen and finishes typing on the left.
As an example, look at the effect here: https://caferati.me/ The text is in a static position as it's being typed, yet it's centered.
https://envato.com/ like here
When using headings, the cursor is not on the same line
Also, is there a way to have an infinite loop of typing on the same line (write one line, backspace it, then write another line, backspace it, then loop back to the first line, etc...)
The docs say that the avgTypingDelay
prop is default '70'. However, this does not seem to be accurate. When you pass in avgTypingDelay='70'
as a prop, the typing speed is much slower.
Do this:
`<Typist>Text to type. Blah, blah, blah </Typist>`
Then do this:
`<Typist avgTypingDelay='70'>Text to type. Blah, blah, blah </Typist>`
Note that in the second case the typing speed is much slower, even though I'm passing in the 'default value'.
Hi,
I'm working with a typist component that uses dynamically api-generated text as the "child" or nested content.
The Typist component itself is rendered conditionally upon all of the necessary text being loaded to local state and passed into the nested text.
{ this.state.display ?
<Typist>
this is some text. today is {this.state.dayOfWeek}.
<br />
<br />
it is {this.state.localTemp} degrees outside
<br />
<br />
.....
<br />
<br />
....
</Typist>
: '' }
As you can see use a number of <br />
components in the body of this text, and on 80% of page loads, the animation proceeds to the end, but i receive the following error at varying points in the typing sequence:
Warning: Encountered two children with the same key,
Typist-element-br-1535132419832.6477
. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted โ the behavior is unsupported and could change in a future version.
in div (created by Typist)
At the same time as the error message logs in the console, an additional <br />
renders somewhere in the block of text as it continues typing.
this causes the entire block of text to jump down a line (or lines, depending on the number of times this error is thrown).
Any insight on how to avoid this? I've tried explicitly passing a key as a prop/attr on each <br />
but no luck.
Thanks
dose it support RTL?
Is it possible to put the typist on a loop? (ie restart after done)
Hi! I'm trying to use this package in a GatsbyJS project but the Typist component doesn't seem to render. Tested it on a CRA, and it works great!
Has anyone else tried using this on a GatsbyJS project?
Is it possible for the letters to also fade in as they are being typed?
Is there anyway to restart the animation when an event occurs. I am somewhat new to Reactjs but usually doing something like this.ref.name.reset() works. In this case, it does not.
Thank you for the lib and all the help.
Tim
Hello, thanks for the component. How about add loop typing effect? https://storj.io/ is the example.
Is there a callback or prop for starting or stopping Typist depending on a trigger? I'm using React-Fullpage and want the typing to start upon page scroll. Currently, when the page is scrolled to the typing will have already began and possibly finished. I was wondering whether there was an inbuilt callback for waiting/delaying the typing until I direct it to begin. Nice package though!
Setting blink in the cursor option currently causes it to blink with a fade in/out animation. Is there a way to blink without fading (as in the style of most text editors?)
Depending on the sentence or padding the animation stops at random places, no matter the length of the passage. If I change the word or spacing I can get it to complete but this means that it can not just take any text without review.
Has anyone else run into this issue? Any workarounds?
Thanks,
Tim
Hello,
the plugin seems to not be property configured when building.
See the error. After installing all the dependencies with npm install, then building and doing npm start it gives the following:
`ERROR in ./examples/main.scss
Module build failed: Error: Cannot find module 'node-sass'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/Users/albertoziveri/Downloads/react-typist-master/node_modules/sass-loader/index.js:4:12)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
@ ./examples/index.js 17:0-22
ERROR in ./src/Cursor.scss
Module build failed: Error: Cannot find module 'node-sass'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/Users/albertoziveri/Downloads/react-typist-master/node_modules/sass-loader/index.js:4:12)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
@ ./src/Cursor.jsx 17:0-24
Child extract-text-webpack-plugin:
ERROR in Cannot find module 'node-sass'
Child extract-text-webpack-plugin:
ERROR in Cannot find module 'node-sass'
webpack: Failed to compile.
`
Love this package!
Would love it even more if I could easily pass an array and have it type one sentence at a time (replacing each time). There is currently not a simple way to do this... I tried to use onTypingDone to call itself again but no luck:
const typeSentence = (sentence) => {
return (
<Typist
avgTypingDelay={50}
cursor={
{
show: true,
blink: true,
element: '|',
hideWhenDone: false,
hideWhenDoneDelay: 1000,
}
}
onTypingDone={() => typeSentence(sample([sentenceArray])}
startDelay={1000}
stdTypingDelay={20}
>
{sentence}
</Typist>
);
};
Hi,
cool library. Would be convenient to have some possibility to immediately show the complete text.
E.g. on mouse click show the complete text
At the moment the blink cursor is using this global css name .Typist .Cursor--blinking
.
Importing this stylesheet with modern tooling like CSS Modules results to a transformed name which is not a match to the classname above.
Also not a very good practice, a better approach could be implementing it using styled-components
or injecting the stylesheet inside header within the component scope.
Any thoughts?
I would like to use the most recent version directly from github. I installed the package using
npm install jstejada/react-typist#master
The module source is installed but not built and therefore does not work. "import Typist from 'react-typist'" fails.
How am I supposed to handle this?
Thanks!
I get this error when I navigate from a page where there is a Typist instance. It seems that Typist want to modify state although the component is unmounted:
warning.js:48 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.warning
@ warning.js:48 getInternalInstanceReadyForUpdate
@ ReactUpdateQueue.js:49 enqueueSetState
@ ReactUpdateQueue.js:196 ReactComponent.setState
@ ReactComponent.js:71 (anonymous function)
@ Typist.js:182 adv
@ Typist.js:376 adv
@ Typist.js:372
I don't know if I got this right, but maybe it has to do with the setTimeout in eachRndTimeout
of utils.js
? For a fix, we can store the timeout id in a variable in utils.js
, add a function to clearTimeout
this id, and call this function in the componentWillUnmount
of Typist
component?
Using a Meteor.js application. I installed meteorhacks:npm and the appropriate react packages.
My packages.json looks like:
{ "name": "name", "version": "1.0.0", "description": "react", "main": "index.js", "dependencies": { "react-dom": "^0.14.7", "react-typewriter": "^0.3.0", "react-typist": "^0.3.0" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
I receive this output when I try to install:
`
:myproject *******_$ npm install react-typist --save
[email protected] /Users/_*****/www/myproject
โโโ [email protected]
npm WARN EPACKAGEJSON [email protected] No repository field.
`
What is happening here?
Help a fellow out and put it back? :-)
<Typist avgTypingDelay={200}
startDelay={1000}
cursor={{blink:true}}
onTypingDone={this.renderAbout}>
<a>Hello!</a>
<Typist.Delay ms={500}/>
<Typist.Backspace count={6} delay={50}/>
</Typist>
This is inside my React Render function. setting cursor={{blink:true}}
and my CSS has cursor: pointer;
still it does not blink?
Thanks so much for you library. I use it and I want to help out.
I wanted to add the lifecycle method getDerivedStateFromProps
.
I am putting my own app thru React.StrictMode
and came your library uses componentWillReceiveProps
and this will just prepare your library to be up to date for used with React.Suspense
and React.lazy()
. Let me know if I can help out.
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
There are times where a text gets duplicated after the animation is done. Is this a known issue?
Hey! Great plugin. I had a question on how to integrate with the input placeholder
Say I have this
<Typist>
<span> Try "This"</span>
<Typist.Backspace count={8} delay={1000}/>
<span> Phrase </span>
</Typist>
<input placeholder={"I want to animate this as typing"} >
How do i animate the placeholder text of the input ?
Hi, i'm new to web dev,
How can i correct this error:
I want Typist components to get the defaultvalue of the textarea
import React from 'react';
import './index.css';
import Typist from 'react-typist'; // https://github.com/jstejada/react-typist
//! WITH WARNINGS, ERRORS AND TYPIST
class Message extends React.PureComponent {
render() {
const dearMessage = "Dear Maxime, ";
return (
<div className="contact-message">
<Typist>
<textarea id="contact-textarea" name="message" spellCheck="false">
{dearMessage}
</textarea>
</Typist>
</div>
);
}
}
export default Message
index.js:1452 Warning: Use the
defaultValue
orvalue
props instead of setting children on <textarea> in textarea (created by Typist)
this one doesnt work with typist but doesnt create warnings/errors
(...)
//! WITHOUT WARNINGS, ERRORS AND TYPIST
class Message extends React.PureComponent {
render() {
const dearMessage = "Dear Maxime, ";
return (
<div className="contact-message">
<textarea id="contact-textarea" name="message" spellCheck="false" defaultValue={dearMessage}>
</textarea>
</div>
);
}
}
(...)
thank you for your time and help
Search engines fetch as an empty string when used. There should be a solution to 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.