catalinmiron/react-typical

React typing animation in ~400 bytes 🐡 of JavaScript.

react-typical

React Animated typing in ~400 bytes 🐡 of JavaScript.

DEMO

Based on awesome typical library by @camwiegert

Youtube Video Tutorial

Install

npm install --save react-typical

Usage

import React, { Component } from 'react'
import Typical from 'react-typical'

class Example extends React.Component {
  render () {
    return (
      <Typical
        steps={['Hello', 1000, 'Hello world!', 500]}
        loop={Infinity}
        wrapper="p"
      />
    )
  }
}

Properties

prop	mandatory	type	Eg.
steps	yes	[]	['Hello', 1000, 'World']
wrapper	no	string	'p'
loop	no	number	3

License

This library is based on @camwiegert/typical work and it currently is just a wrapper for react.

MIT © catalinmiron

react-typical's Issues

Unable to install it with latest node version

"25 silly fetch manifest react-typical@*
26 http fetch GET 200 https://registry.npmjs.org/react-typical 19ms (from cache)
27 silly fetch manifest prop-types@^15.5.4
28 http fetch GET 304 https://registry.npmjs.org/prop-types 1202ms (from cache)
29 silly fetch manifest react@^17.0.1
30 http fetch GET 304 https://registry.npmjs.org/react 243ms (from cache)
31 silly fetch manifest react@^15.0.0 || ^16.0.0"
"40 error code ERESOLVE
41 error ERESOLVE unable to resolve dependency tree"

re-render issue

The component re-render but no props changed.

Can we add memo for prevent re-render issue ?

Typical

Hi bro
When i install the typical it show found 0 vulnerabilities
And when i reunn my project nothing show in browser

Typing in an Input causes Typical to "Strobe" in an out

The text appears and disappears rapidly once I start typing inside an field of a form.

Make compatible with TypeScript

I was recently making a site using TSX an i wanted to use react-typical but when tried to install @types/react-typical it was not finding that module, so i guess they didn't made it yet.

Forward props to wrapper

I want to use this lib to add typing to an anchor tag, but if I set a as the wrapper, I can't pass the href to react-typical component to be forwarded to the underlying wrapper. I'm working around this currently by nesting a span under the react-typical component but was wondering if you'd be interested in a PR to forward those props.

how to increase text size?

How to use Ref to refer to this element?

I am trying to clear the content being typed when a button is pushed.

Al borrar borra con retraso y cómo parpadeando | When erasing erases with delay and how flashing

2021-11-21_21h04_58.mp4

Hola, espero me puedan indicar que podemos hacer si disponen de tiempo. Mil gracias :).

Support Typescript

Are there any plans to write types or rewrite in typescript

How to change the typing speed?

Really fast effect after scroll up/down

Same effect x100 on a one page

How to render an image or html tag?

I want to render an image on my react app with react-typical, how to do this?

Adapt to current version of react

While installing react-typical using the react version 17.0.2, I stumbled upon the following error, it seems that your library needs an older version of react/NPM to function properly. So I need to downgrade my package so it can works fine.
any other solution would be appreciated.

I am unable to install this dependecies with the latest recommended node

This is what I have been seeing.

$ npm i react-typical
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@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-typical
npm ERR! react-typical@"*" 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 C:\Users\Joseph Edemekong\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Joseph Edemekong\AppData\Local\npm-cache_logs\2021-07-10T06_49_03_998Z-debug.log

Error: React.useRef is not a function

Getting error trying to use simple use case.

Typescript throwing error when trying to import Typical

Could not find a declaration file for module 'react-typical'. 'd:/Websites/AAG Innovations/V3/aag-innov-v3-0/node_modules/react-typical/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react-typical if it exists or add a new declaration (.d.ts) file containing declare module 'react-typical';ts(7016)

Support React Native

Does anyone know of a similar library for React Native?

同学，您这个项目引入了1007个开源组件，存在34个漏洞，辛苦升级一下

检测到 catalinmiron/react-typical 一共引入了1007个开源组件，存在34个漏洞

漏洞标题：yeikos js.merge 安全漏洞
缺陷组件：[email protected]
漏洞编号：CVE-2020-28499
漏洞描述：yeikos js.merge是美国Yeikos个人开发者的一个应用软件。提供了合并js工具。
yeikos js.merge 中存在安全漏洞。该漏洞源于所有相关分支的合并都容易受到该代码库的原型影响。以下产品及版本受到影响：yeikos js.merge
影响范围：(∞, 2.1.1)
最小修复版本：2.1.1
缺陷组件引入路径：[email protected]>[email protected]>[email protected]>[email protected]>[email protected]>[email protected]

另外还有34个漏洞，详细报告：https://mofeisec.com/jr?p=aec87b

Peer dependency Issue due to Package.json configuration

While installing package through node package module i got this error

Which may be caused by Peer Dependency in Package.json file. Kindly update react and react-dom to latest version i.e. 17.0.2.

Cleanup function

If you using useEffect please return cleanup function otherwise component get bugged.

Can't Install the Library

PS F:\React JS\inshalayaz> npm install --save react-typical
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@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-typical
npm ERR! react-typical@"*" from the root project
npm ERR!
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 C:\Users\insha\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\insha\AppData\Local\npm-cache_logs\2021-06-21T19_33_47_256Z-debug.log

typical is not installing in react-18

I'm seeing this error

While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-typical
npm ERR! react-typical@"*" from the root project

How to access the styles.css to change the "|" to be something other than infinite?

I would like the "|" to stop blinking once it has typed the full word. I assume it is infinitely blinking because of the line of code that says "animation: blink 1s infinite step-start;" but I can't figure out how to change what was downloaded.

Every rerender causes a new instance to be attached

I am using react-scroll-parallax and I am seeing an issue where if it rerenders on scroll in my case, a new instance of typical is attached to the element resulting in very janky visuals.

Screen.Recording.2022-06-01.at.11.00.19.AM.mp4

Edit: Wrapping it in a PureComponent fixes the issue, but I feel like I shouldn't need to do this.

we can't add a className

Hello,

We can't add a className for this component, can you add it ?

Thx