react-typed-component

A react wrapper for typed.js

This is a maintained fork of react-typed.

I'm quite new to maintain a npm package. If there are bugs, please open an issue in this repo.

Live demo (Storybook): https://kxxt.github.io/react-typed-component

Installation

Install with yarn or npm

yarn add react-typed-component
        #or
npm i react-typed-component

Examples

A basic example

import ReactTyped from "react-typed-component";

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 from "react-typed-component";

const MyComponent = () => {
  const typed = useRef(null);
  return (<div>
    <button onClick={() => typed.current.start()}>Start</button>
    <button onClick={() => typed.current.stop()}>Stop</button>
    <button onClick={() => typed.current.toggle()}>Toggle</button>
    <button onClick={() => typed.current.destroy()}>Destroy</button>
    <button onClick={() => typed.current.reset()}>Reset</button>
    <br/>
    <ReactTyped
        typedRef={typedI => {
          typed.current = typedI;
        }}
        strings={["Here you can find hardware", "Here you can find software", "Here you can find net tools",]}
        typeSpeed={40}
    />
  </div>);
}

for blinking cursor import 'react-typed-component/dist/animatedCursor.css';

Documentation

react-typed-component supports all official options that you can find here. But also supports some extra props:

| propType | required | default | description | | ----------------- | -------- | ------- | ------------------------------------------------ | | style(object) | no | - | styles for the outer element | | className(string) | no | - | class name for the outer element | | children(object) | no | - | the element to wrap | | typedRef(func) | no | - | typedRef(self: Typed) returns the Typed instance | | stopped(bool) | no | - | initialize in stopped state |

Credits

Thanks to @ssbeefeater for creating the original react-typed.

Thanks to all contributers of typed.js.