https://github.com/williamboman/react-typewriting

React component for creating customizable typewriting visualizations
https://github.com/williamboman/react-typewriting

react typewriter typewriting

Last synced: about 2 months ago
JSON representation

React component for creating customizable typewriting visualizations

• Host: GitHub
• URL: https://github.com/williamboman/react-typewriting
• Owner: williamboman
• Created: 2017-10-29T10:00:43.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-01-03T20:11:13.000Z (almost 6 years ago)
• Last Synced: 2024-09-25T23:50:09.148Z (3 months ago)
• Topics: react, typewriter, typewriting
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-typewriting
• Size: 121 KB
• Stars: 9
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
*React component for creating customizable typewriting visualizations*

[![Build Status](https://travis-ci.org/williamboman/react-typewriting.svg?branch=master)](https://travis-ci.org/williamboman/react-typewriting)

## Usage

```tsx

import { Typewriting } from 'react-typewriting'

interface TypewritingRenderArgs {

    currentText: string

    fullCurrentText: string

}

    {({ currentText, fullCurrentText }: TypewritingRenderArgs) => (

        
{currentText}

    )}


```

## Installation

```sh

$ npm install react-typewriting

# or

$ yarn add react-typewriting

```

## Props

### `strings` | `Array` | *required*

The strings to print out, in order of appearance.

### `children` | `({ currentText: string, fullCurrentText: string }) => ReactNode` | *required*

The child render prop.

- `currentText` holds the latest, sliced, version of the current string

- `fullCurrentText` holds the full value of the current string

### `waitBeforeDeleteMs` | `number` | default: 9000

Amount of milliseconds strings will be fully readable before starting

to delete the string.

### `writeSpeedMs` | `number` or `[number, number]` | default: 100

This prop controls the speed at which the strings are built.

If provided a `number`, this number will be the longest time to wait between writing characters.

If provided a `[number, number]` tuple, a number between these two values will be the longest time to wait between writing characters.

### `deleteSpeedMs` | `number` or `[number, number]`| default: 60

Same as `writeSpeedMs` (see above), but for when deleting characters.

## License

Licensed under the MIT license.

## Authors

**William Boman**