EctTypedResponseService JS

ect-typed-response-service-js provides progressive typing/text reveal behavior for Vanilla JS and React apps.

Build

npm run build:ect-typed-response-service-js

Vanilla JS

import { EctTypedResponseServiceJs } from 'ect-typed-response-service-js';

const typed = new EctTypedResponseServiceJs();
typed.typeResponseOut('Hello world', 25);

const timer = setInterval(() => {
  console.log(typed.TypedText);
  if (typed.TypedText === 'Hello world') {
    clearInterval(timer);
  }
}, 40);

React

import { useEffect, useMemo, useState } from 'react';
import { EctTypedResponseServiceJs } from 'ect-typed-response-service-js';

export function TypedMessage() {
  const typed = useMemo(() => new EctTypedResponseServiceJs(), []);
  const [text, setText] = useState('');

  useEffect(() => {
    typed.typeResponseOut('Loading complete', 25);
    const timer = setInterval(() => setText(typed.TypedText), 30);

    return () => {
      clearInterval(timer);
      typed.stopTyping();
    };
  }, [typed]);

  return <div>{text}</div>;
}

API

• TypedText: current progressively typed value
• typeResponseOut(input, interval?): starts typing output (interval default is 25ms)
• stopTyping(): stops and clears active interval
• createEctTypedResponseServiceJs()

Dependencies

• No framework dependency at runtime

Further help

• https://angular-grid.net/

Licence

The licence agreement for this paid component can be found here:

• https://angular-grid.net/assets/licence/licence_agreement.txt