Skip to content

j127/react-text-spinners

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-text-spinners

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

NPM

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