Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/taylorbriggs/react-native-typewriter
A React Native component for creating typing effects
https://github.com/taylorbriggs/react-native-typewriter
Last synced: 7 days ago
JSON representation
A React Native component for creating typing effects
- Host: GitHub
- URL: https://github.com/taylorbriggs/react-native-typewriter
- Owner: TaylorBriggs
- License: mit
- Created: 2016-05-21T19:20:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-09-23T01:41:13.000Z (over 1 year ago)
- Last Synced: 2024-12-12T14:09:45.637Z (11 days ago)
- Language: JavaScript
- Size: 2.32 MB
- Stars: 100
- Watchers: 2
- Forks: 27
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
### Update: July 25, 2023
This repo hasn't been maintained for about two years and I don't have any plans to continue working on it.
# react-native-typewriter
A [React Native] component for creating typing effects.
Inspired by [react-typewriter].
## Installation
```
$ yarn add react-native-typewriter
```
OR
```
$ npm install --save react-native-typewriter
```
## Usage
Pass text and a typing direction into the component to control its animation.
```javascript
import React, { Component } from 'react'
import TypeWriter from 'react-native-typewriter'
class TypingText extends Component {
render() {
return Hello World!
}
}
```
## Documentation
Any props accepted by React Native's `Text` component are accepted by `TypeWriter`. These additional props are also accepted:
### typing
type: `Number` default: `0`
A value of 1 types text left to right until completion. A value of -1 erases
text from right to left. A value of 0 stops the animation.
### fixed
type: `Boolean` default: `false`
This flag will ensure the enclosing container's size and shape is fixed.
Prevents the text from shifting around as it grows into its container.
### maxDelay
type: `Number` default: `100`
The maximum delay between each typed token in milliseconds.
### minDelay
type: `Number` default: `20`
The minimum delay between each typed token in milliseconds.
### delayMap
type: `Array[Object]` default: `none`
Adds additional delay to specific characters before the next character is typed.
```javascript
let delayMap = [
// increase delay by 100ms at index 4
{ at: 4, delay: 100 },
// increase delay by 400ms following every '.' character
{ at: '.', delay: 400 },
// decrease delay by 200ms following every '!' character
{ at: /!/, delay: -200 }
]
```
### initialDelay
type: `Number` default: `200`
The time in milliseconds before the first token is typed.
### onTyped
type: `Function` default: `none`
A callback called when each token is typed or erased during the animation. The
function is called with two arguments:
`(String token, Number previousVisibleCharacters)`.
### onTypingEnd
type: `Function` default: `none`
Called once the typing animation has completed. This callback is **not** called
if `props.typing` is changed to `0` before the animation completes.
## License
Released under the MIT license. See [LICENSE](LICENSE) for details.
[React Native]: https://facebook.github.io/react-native/
[react-typewriter]: https://github.com/ianbjorndilling/react-typewriter