https://github.com/ssbeefeater/react-typed
A react wrapper for typed.js
https://github.com/ssbeefeater/react-typed
reactjs
Last synced: 8 months ago
JSON representation
A react wrapper for typed.js
- Host: GitHub
- URL: https://github.com/ssbeefeater/react-typed
- Owner: ssbeefeater
- License: mit
- Created: 2017-11-30T06:02:06.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-06-18T19:28:18.000Z (over 1 year ago)
- Last Synced: 2025-05-12T12:08:56.701Z (8 months ago)
- Topics: reactjs
- Language: TypeScript
- Homepage: http://ssbeefeater.github.io/react-typed
- Size: 3.91 MB
- Stars: 341
- Watchers: 2
- Forks: 34
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- javascript-awesome-packages - `React-typed` - A react wrapper for typed.js
README
# react-typed
### A react wrapper for [typed.js](https://github.com/mattboldt/typed.js)
### react-typed v2 changelog
- Rewrite 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](#installation)
[Docs & Examples](http://ssbeefeater.github.io/react-typed)
---
#### Installation
Install with [yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com/)
```sh
yarn add react-typed
#or
npm install react-typed --save
```
---
#### Examples
```javascript
import { ReactTyped } from "react-typed";
const MyComponent = () => (
);
```
###### Using typed start, stop, toggle, destroy, reset functions
```javascript
import { ReactTyped,Typed } from "react-typed";
const MyComponent {
const [typed,setTyped] = React.useState()
return (
Start
Stop
Toggle
Destroy
Reset
)
}
```
###### Start only if is visible in the dom
```javascript
import { ReactTyped } from "react-typed";
const MyComponent = () => (
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} >
);
```