Hidden Popup

The Popup enables you to control its visibility.

To show or hide the Popup, use the show property.

<style>
  .popup-content {
    padding: 30px;
    color: #787878;
    background-color: #fcf7f8;
    border: 1px solid rgba(0,0,0,.05);
  }
</style>
class AppComponent extends React.Component {
       anchor = null;
       constructor(props) {
           super(props);
           this.state = { show: false };
       }

       render() {
           return (
               <div>
                   <button
                       className="k-button"
                       onClick={this.onClick}
                       ref={(button) => {
                           this.anchor = button;
                       }}
                   >
                       {this.state.show ? 'Hide' : 'Show'}
                   </button>
                   <Popup
                       anchor={this.anchor}
                       show={this.state.show}
                       popupClass={'popup-content'}
                   >
                       Popup content.
                   </Popup>
               </div>
           );
       }

       onClick = () => {
           this.setState({ show: !this.state.show });
       }
   }

   ReactDOM.render(
       <AppComponent />,
       document.querySelector('my-app')
   );

In this article