react-typed

A react wrapper for 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

Docs & Examples

Installation

Install with yarn or npm

yarn add react-typed
        #or
npm install react-typed --save

Examples

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

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

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

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>
);