A React component to simulate loading text from old french Minitel

Usage no npm install needed!

<script type="module">
  import reactLoadingText from '';


Coded for a small personnal project, I put the component on npm. Don't hesitate to fork and do what you want with it!

alt text

How to install:

npm i react-loading-text

How to use

import React from "react";
import LoadingEffect from "react-loading-text";

const Text = () => {
  return (
        default: [
          () => alert("Loading finished!")
      <p>Hello World!</p>

The LoadingEffect (name it like you want) component take a style object props. It can have 4 keys that correspond to the screen width:

  • default > 1200px
  • md > 992px
  • sm > 768px
  • xs <= 768px

Those keys are Array that have 6 elements, in order:

  • lineheight: same that css, the height of one line
  • numberline: the number of lines you want to make appears
  • color
  • delay: delay before the animation start, in second.
  • duration: duration for one line to appear, in second.
  • timing: like css, ease, linear, ease-in, ease-out, ease-in-out.
  • callback : a function call when animation end.

Like that you can have responsive animations depending on how your text behave.