CODEWITHSUNDEEP
javascriptreactjssemantic-uistickysemantic-ui-react
LittleMygler
LittleMygler

Reputation: 632

Make a component stick to screen with a message. React

What I want to do is to make a nice message box that appears when I'm saving something, I have access to a state that tells me if it's loading or not, but I can't seem to make a component that always appears, no matter how much you've scrolled.

The page is pretty long so wherever they click on a button that triggers this save function, I want this to appear. Where they are.

I've used Semantic UI in this project, and I've tried their sticky component but it only makes the component follow the screen like 50px, I want that number to be infinite.

Thankful for every answer

Upvotes: 0

Views: 716

Answers (1)

fsl
fsl

Reputation: 3280

You could also achieve this with a fixed modal I guess.

Inside your main component:

state = {
    // (...)
    isLoading: false
}

// (...)

render() {
    return (
        // Rest of your code
        {this.state.isLoading && <MessageComponent/>} // or however you're rendering the message/modal
        // Rest of your code
    )
}

Then in your respective css file styling your MessageComponent:

.messageComponent {
    position: fixed;
}

Upvotes: 2

Related Questions