How do I use the State component of a react component?-CodePudding

I am trying to use a spinner loading icon from the 'react-loading' npm. I am relatively new to React so I'm having trouble starting and stopping this spinner.

The library declaration looks like this:

import * as React from 'react';

export default class Loading extends React.Component<LoadingProps, LoadingState> { 
}

type LoadingType = "blank" | "balls" | "bars" | "bubbles" | "cubes" | "cylon" | "spin" | "spinningBubbles" | "spokes";

declare interface LoadingProps {
    color? : string;
    height? : any;
    width? : any;
    delay?: number;
    type? : LoadingType;
    className?: string;
}

declare interface LoadingState{
    delayed : boolean;
}

And in my component, I use it inside a div.

<>
...
   <ReactLoading type="spin" className="Loading" color={"red"} height={'5%'} width={'5%'} />
...
</>

So I am able to change all the properties like this, but there are no methods to start/stop this icon, so currently, it just keeps on going without any state. I see that in the declaration, there is a "LoadingState" and a property "delayed: boolean" but Im not sure how I can use this.

CodePudding user response：

If I understand properly, you want to show and hide your loading based on some works, and for doing that you should define a state like:

const MyComponent = props => {

  const [showLoading, setShowLoading] = useState(true);

  // call it whatever you need
  const onFinishMyWork = () => {
    // do anything else ...
    setShowLoading(false);
  }

  return (
    <>
      {showLoading && (
        <ReactLoading type="spin" className="Loading" color={"red"} height={'5%'} width={'5%'} />
      )}
    </>
  );
}

Also you can define more states to change loading props.

hope this be useful.

CodePudding user response：

You cannot stop that loader from spining. But you can make a boolean state for hide/show the loading like this:

const [isLoading, setIsLoading] = useState(true)

return (
<>
...
   {isLoading && <ReactLoading type="spin" className="Loading" color={"red"} height={'5%'} width={'5%'} /> }
</>
)

btw, the delay param use for the loader to wait before showing on the screen