Skip to content

ssbeefeater/react-typed

Repository files navigation

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