A react wrapper for typed.js
npm install react-typed- Re-wright in typescript
- Support for react 18
- option to start animation only when the element is visible
- new property parseRef for supporting custom components that handles ref differently (see last example)
- update docs with latest storybook version
---
---
#### Installation
``sh`
yarn add react-typed
#or
npm install react-typed --save
---
#### Examples
`javascript
import { ReactTyped } from "react-typed";
const MyComponent = () => (
"Search for products",
"Search for categories",
"Search for brands",
]}
typeSpeed={40}
backSpeed={50}
attr="placeholder"
loop
>
###### Using typed start, stop, toggle, destroy, reset functions
javascript
import { ReactTyped,Typed } from "react-typed";const MyComponent {
const [typed,setTyped] = React.useState()
return (
strings={["Here you can find anything"]}
typeSpeed={40}
/>
)
}
`###### Start only if is visible in the dom
javascript
import { ReactTyped } from "react-typed";const MyComponent = () => (
strings={[
"If startWhenVisible is true, will start when is visible in the dom",
]}
typeSpeed={40}
/>
);
`#### Using parseRef for custom components
javascript
import { ReactTyped } from "react-typed";
import { Input } from "antd";const MyComponent = () => (
ref.current.input} attr="placeholder" strings={["Add a name here"]} typeSpeed={40} >
);
``