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.
npm install --save react-text-spinners
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" />
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.
MIT © j127