CODEWITHSUNDEEP
javascriptreactjssemantic-uisemantic-ui-react
matgargano
matgargano

Reputation: 411

SemanticUI React Popup Fade In/Fade Out

I am trying to simply get the popup to fade out and fade in...

It doesn't appear that semantic-ui-react gives you access to transitions what is the best way to do this... an example can be found at https://codesandbox.io/s/z35z9vw953

here is the sample component for posterity:

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import "semantic-ui-css/semantic.min.css";
import { Popup } from "semantic-ui-react";

class App extends Component {
  state = {
    isOpen: true
  };
  render() {
    let trigger = <div>OK!</div>;
    return (
      <div>
      <Popup
        trigger={trigger}
        content="hello world"
        open={this.state.isOpen}
        position="right center"
      />

      {!this.state.isOpen && <button onClick={()=>this.setState({isOpen: true})}>Click to open</button>}
      {this.state.isOpen && <button onClick={() => this.setState({ isOpen: false })}>Click to close</button>}

      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

edit:

I tried wrapping a around the entire thing and having the transition control it's showing/hiding, but it appears the visibility for the popup is !important so it really mucks with the fading in and out... see here https://codesandbox.io/s/43mvoynq7 and below:

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import "semantic-ui-css/semantic.min.css";
import { Popup, Transition } from "semantic-ui-react";

class App extends Component {
  state = {
    isOpen: true
  };
  render() {
    let trigger = <div>OK!</div>;
    return (
      <div>
        <Transition
          visible={this.state.isOpen}
          animation="scale"
          duration={500}
        >
          <Popup
            trigger={trigger}
            content="hello world"
            open={this.state.isOpen}
            position="right center"
          />
        </Transition>
        {!this.state.isOpen && (
          <button onClick={() => this.setState({ isOpen: true })}>
            Click to open
          </button>
        )}
        {this.state.isOpen && (
          <button onClick={() => this.setState({ isOpen: false })}>
            Click to close
          </button>
        )}
        <button onClick={() => {}}>OK</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Upvotes: 2

Views: 1543

Answers (1)

Hashbrown
Hashbrown

Reputation: 13023

Transitions are simply css classes you can dynamically update.

 className = { `transition fade ${(this.state.isOpen) ? 'in' : 'out'}` }

Just make sure the Popup, "isOpen" for the duration of the transition.

Working example from your first link;

class App extends Component {
  state = {
    isOpen : true,
    fading : null
  };
  toggle = () => {
    clearTimeout(this.state.fading);
    this.setState({
      isOpen : !this.state.isOpen,
      fading : setTimeout(() => {this.setState({fading:null})}, 1000)
    });
  };
  render() {
    let trigger = <div>OK!</div>;
    return <div>
        <Popup
          trigger   = { trigger }
          content   = "hello world"
          open      = { this.state.isOpen || this.state.fading }
          className = { `transition fade ${(this.state.isOpen) ? 'in' : 'out'}` }
          position  = "right center"
        />

        <button onClick={ this.toggle }>
          Click to {this.state.isOpen ? "close" : "open"}
        </button>
    </div>;
  }
}

Upvotes: 2

Related Questions