# react-typed

> A react wrapper for typed.js

Latest version **2.0.12** (published 2024-01-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-typed
pnpm add react-typed
yarn add react-typed
bun add react-typed
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.12 |
| Published | 2024-01-25 |
| First published | 2017-11-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 23.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 348 |
| Author | Mike Antoniadis |
| Maintainers | ssbeefeater |

## Links

- npm: https://www.npmjs.com/package/react-typed
- Repository: https://github.com/ssbeefeater/react-typed
- Homepage: https://github.com/ssbeefeater/react-typed#readme
- Issues: https://github.com/ssbeefeater/react-typed/issues
- npm.io page: https://npm.io/package/react-typed

## Dependencies (1)

- [typed.js](https://npm.io/package/typed.js.md) ^2.1.0

## Recent versions

- 2.0.12 (latest) — 2024-01-25
- 2.0.7 (beta) — 2024-01-23
- 2.0.11 — 2024-01-24
- 2.0.10 — 2024-01-24
- 2.0.9 — 2024-01-23
- 2.0.8 — 2024-01-23
- 2.0.6 — 2024-01-23
- 2.0.5 — 2024-01-23
- 2.0.4 — 2024-01-23
- 2.0.3 — 2024-01-23
- 2.0.2 — 2024-01-23
- 2.0.1 — 2024-01-23
- 2.0.0 — 2024-01-23
- 1.2.0 — 2019-08-10
- 1.1.2 — 2019-03-19
- … 12 more at https://npm.io/package/react-typed/versions

## README

# react-typed

### A react wrapper for [typed.js](https://github.com/mattboldt/typed.js)

### react-typed v2 changelog

- 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](#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 = () => (
  <div>
    <ReactTyped strings={["Here you can find anything"]} typeSpeed={40} />
    <br />

    <ReactTyped
      strings={[
        "Search for products",
        "Search for categories",
        "Search for brands",
      ]}
      typeSpeed={40}
      backSpeed={50}
      attr="placeholder"
      loop
    >
      <input type="text" />
    </ReactTyped>
  </div>
);
```


###### Using typed start, stop, toggle, destroy, reset functions

```javascript
import { ReactTyped,Typed } from "react-typed";

const MyComponent  {
  const [typed,setTyped] = React.useState<Typed| undefined>()

  return (
      <div>
        <Button onClick={typed.start()}>Start</Button>
        <Button onClick={typed.stop()}>Stop</Button>
        <Button onClick={typed.toggle()}>Toggle</Button>
        <Button onClick={typed.destroy()}>Destroy</Button>
        <Button onClick={typed.reset()}>Reset</Button>
        <ReactTyped
          typedRef={setTyped}
          strings={["Here you can find anything"]}
          typeSpeed={40}
        />
      </div>
    )
}
```

###### Start only if is visible in the dom

```javascript
import { ReactTyped } from "react-typed";

const MyComponent = () => (
  <ReactTyped
    startWhenVisible
    strings={[
      "If <strong>startWhenVisible</strong> is <strong>true</strong>, 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 = () => (
  <ReactTyped parseRef={(ref) => ref.current.input} attr="placeholder" strings={["Add a name here"]} typeSpeed={40} >
    <Input>
  </ReactTyped>
);
```

---
_Source: https://npm.io/package/react-typed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._