typed.js

[![npm](https://img.shields.io/npm/dt/typed.js.svg)](https://img.shields.io/npm/dt/typed.js.svg)
[![GitHub license](https://img.shields.io/badge/license-GPL3-blue.svg)](https://raw.githubusercontent.com/mattboldt/typed.js/main/LICENSE.txt)

<img src="https://raw.githubusercontent.com/mattboldt/typed.js/main/logo-cropped.png" width="450px" title="Typed.js" />

### [Live Demo](http://www.mattboldt.com/demos/typed-js/) | [View All Demos](http://mattboldt.github.io/typed.js/) | [View Full Docs](http://mattboldt.github.io/typed.js/docs) | [mattboldt.com](http://www.mattboldt.com)

Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

---

## Licensing

<table align="center">
  <tr>
    <th><a href="LICENSE.txt">GPL-3.0 License</a></th>
    <th><a href="https://buy.stripe.com/9B6aEW9hvg4Zg2Hh0FgA800">Limited Commercial License</a></th>
    <th><a href="https://buy.stripe.com/cNi4gy51fg4ZbMr25LgA801">Unlimited Commercial License</a></th>
  </tr>
  <tr>
    <td>
      <p>Free for use on personal and open source projects</p>
      <p><a href="LICENSE.txt">View License</a></p>
    </td>
    <td>
      <p>For use on a single commercial project</p>
      <p><a href="https://buy.stripe.com/9B6aEW9hvg4Zg2Hh0FgA800">Purchase License</a></p>
      <p><a href="LIMITED_COMMERCIAL_LICENSE.md">View License</a></p>
    </td>
    <td>
      <p>For use on unlimited commercial projects</p>
      <p><a href="https://buy.stripe.com/cNi4gy51fg4ZbMr25LgA801">Purchase License</a></p>
      <p><a href="UNLIMITED_COMMERCIAL_LICENSE.md">View License</a></p>
    </td>
  </tr>
</table>

## Installation

For use with a build tool like [Vite](https://vitejs.dev/), and/or in a React application, install with NPM or Yarn.

#### NPM

```
npm install typed.js
```

#### Yarn

```
yarn add typed.js
```

#### General ESM Usage

```js
import Typed from 'typed.js';

const typed = new Typed('#element', {
  strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
  typeSpeed: 50,
});
```

### ReactJS Usage

```js
import React, { useEffect, useRef } from 'react';
import Typed from 'typed.js';

function MyComponent() {
  // Create reference to store the DOM element containing the animation
  const el = useRef(null);

  useEffect(() => {
    const typed = new Typed(el.current, {
      strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
      typeSpeed: 50,
    });

    return () => {
      // Destroy Typed instance during cleanup to stop animation
      typed.destroy();
    };
  }, []);

  return (
    <div className="App">
      <span ref={el} />
    </div>
  );
}
```

### CDN

```html
<script src="https://unpkg.com/typed.js@3.0.0/dist/typed.umd.js"></script>
```

For use directly in the browser via `<script>` tag:

```html
  <!-- Element to contain animated typing -->
  <span id="element"></span>

  <!-- Load library from the CDN -->
  <scri