Skip to main content

AppearingText

Dependencies​

npm install @mui/material @emotion/react @emotion/styled

Usage​

import { AppearingText } from "@arclockproject/common/components/AppearingText";

The examples below are live. Edit the code to try your own values.

Default speed​

One character every 100ms.

▶ Show code (click to view and edit)
Live Editor
<AppearingText>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo quod fugiat
  excepturi temporibus iste reiciendis repudiandae aliquam libero atque, sed id
  nemo quia similique hic ducimus labore corrupti cupiditate quae.
</AppearingText>
Result
Loading...

Custom speed​

One character every 20ms.

▶ Show code (click to view and edit)
Live Editor
<AppearingText speed={20}>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo quod fugiat
  excepturi temporibus iste reiciendis repudiandae aliquam libero atque, sed id
  nemo quia similique hic ducimus labore corrupti cupiditate quae.
</AppearingText>
Result
Loading...

Playground​

Typing starts again whenever the text or speed changes. It accepts all MUI Typography props, like variant.

▶ Show code (click to view and edit)
Live Editor
function AppearingTextPlayground() {
  const [text, setText] = useState("Hello there! This text types itself out.");
  const [speed, setSpeed] = useState(50);
  const [variant, setVariant] = useState("h5");
  const [restart, setRestart] = useState(0);

  return (
    <div>
      <textarea value={text} onChange={(e) => setText(e.target.value)} rows={2} style={{ width: "100%" }} />
      <p>
        Speed {speed}ms per character. <br />
        <input type="range" min={5} max={300} value={speed} onChange={(e) => setSpeed(Number(e.target.value))} />
        <select value={variant} onChange={(e) => setVariant(e.target.value)}>
          {["h3", "h5", "body1", "caption"].map((name) => <option key={name}>{name}</option>)}
        </select>
        <button onClick={() => setRestart(restart + 1)}>Restart</button>
      </p>
      <AppearingText key={restart} speed={speed} variant={variant}>
        {text}
      </AppearingText>
    </div>
  );
}
Result
Loading...

API​

See the AppearingText API reference for every prop, method and type.