CODEWITHSUNDEEP
reactjs
user1732458
user1732458

Reputation:

React Loading Overlay implementation on a <button> click

I'm trying to implement react-loading-overlay on a button when it's clicked. This is to help show the back end is authenticating and provide the user feedback that something is happening. I'm unclear on the button how to Activate the loading spinner when clicked, and not have it loading spinner when it's idle. The main issue is I don't understand how to define "active" when the button is clicked.

  <Button onClick={handleSign} color="primary">
           <LoadingOverlay
              
              active={What do I use?}
                        spinner
                        text='Loading your content...'
                    >
                    Authenticate
                </LoadingOverlay>
   </Button>

https://www.npmjs.com/package/react-loading-overlay

Upvotes: 0

Views: 12109

Answers (4)

Marie
Marie

Reputation: 1

you can do something like...

const state = {processing: false}

then, inside your "handleSign", you can do:

this.setState({processing: true})

finally, inside your button, you can call that state:

 active={this.state.processing}

Upvotes: 0

incredever
incredever

Reputation: 231

Try like this. You need to set active props true once you press sign in button.

const [loading, setLoading] = useState(false)

const handleSignIn = (event) => {
  setLoading(true)
}

...

render() {
  return (
    <LoadingOverlay
     active={loading}
     ...
    >
  )
}

Maybe you should have to set loading to false once signing in succeed or failed.

Upvotes: 0

John Salzman
John Salzman

Reputation: 550

The 'active' value is just a true or false. It is true if you want it to be spinning Here is an example using functions and hooks where you can toggle it

import React, { useState } from "react";
import LoadingOverlay from "react-loading-overlay";

export default function App() {
  let [loading, setLoading] = useState(false);

  return (
    <div
      className="App"
      style={{ backgroundColor: "lightblue", height: "500px" }}
    >
      <button onClick={() => setLoading(!loading)} color="primary">
        <LoadingOverlay active={loading} spinner text="Loading your content...">
          Authenticate
        </LoadingOverlay>
      </button>
    </div>
  );
}

Upvotes: 1

Wasim Abuzaher
Wasim Abuzaher

Reputation: 814

In handleSign update a state value (let's say active) to true and when you receive response from the backend, update that state (active) to false

then in the component use that state value:

<LoadingOverlay
     active={active}
     ...
>
...
</LoadingOverlay>

Upvotes: 0

Related Questions