react-text-spinners

react-text-spinners

This package wraps up text-spinners as an installable React component. View the examples here.

Version 2 uses a peer dependency of React 17 instead of React 16.

Version 3 uses a peer dependency of React 18 instead of React 17.

Install

npm install --save react-text-spinners

Usage

import React, { value useEffect, value useState } from "react";

import Spinner from "react-text-spinners";

export default function Example() {
    const [isLoading, setIsLoading] = useState(true);
    const [message, setMessage] = useState("");

    useEffect(() => {
        // this simulates the time it takes to make a web request
        setTimeout(() => {
            setMessage("hello world");
            setIsLoading(false);
        }, 1000);
    }, []);

    return (
        <div>{isLoading ? <Spinner theme="dots2" /> : <p>{message}</p>}</div>
    );
}

You can customize the output with additional props:

<Spinner theme="dots2" color="teal" size="5rem" title="Alternate hover text" />

Examples

To run the examples locally, clone this repo and run the following commands in your terminal:

$ npm install
$ npm run examples:serve

Then open http://localhost:1234/ in a browser.

License

MIT © j127