React Bootstrap Waves effect

React Waves effect - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React Bootstrap waves effect is an impression of circular overlay movement, triggered by clicking the object, flowing from the center of the click. By default, waves are added to buttons, masks, and navbar's links as in examples below.

Example

Click me

Show code

        
            
        import React from "react";
        import { MDBBtn, MDBCardImage } from "mdbreact";

        const WavesPage = () => {
          return (
            <div>
              <MDBBtn color="primary">Click me</MDBBtn>

              <MDBCardImage
                className="img-fluid"
                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(54).webp"
                waves
              />
            </div>
          );
        }

        export default WavesPage;

Customization

You can add waves effect to any element. The Waves component requires object with cursor's time and position. We will have to set up a function and store the cursor information in state.

Show code

        
            
        import React from "react";
        import { MDBWaves } from "mdbreact";

        class CustomComponent extends React.Component {
          constructor(props) {
            super(props);
            this.state = {
              cursorPos: {}
            };
          }

          handleClick = e => {
            e.stopPropagation();
            // Waves - Get Cursor Position
            let cursorPos = {
              top: e.clientY,
              left: e.clientX,
              time: Date.now() // time indicates particular clicks
            };
            this.setState({ cursorPos: cursorPos });
          };

          render() {
            return (
              <div
                onMouseUp={this.handleClick}
                onTouchStart={this.handleClick}
              >
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(54).webp" />
                <MDBWaves
                  cursorPos={this.state.cursorPos}
                />
              </div>
            );
          }
        }

        export default CustomComponent;

React Waves effect - API

In this section you will find advanced information about the Waves component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Imports

Show code

javascript

        
            
      import React from 'react';
      import { MDBWaves } from 'mdbreact';

Usage

Use MDBWaves component as a child of the component on which you want to achieve waves effect.
Add click events to the component to find out the cursor position and pass those information to the Waves component.

Show code

javascript

        
            
      import React from "react";
      import { MDBWaves } from "mdbreact";

      class CustomComponent extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            cursorPos: {}
          };
        }

        handleClick = e => {
          e.stopPropagation();
          // Waves - Get Cursor Position
          let cursorPos = {
            top: e.clientY,
            left: e.clientX,
            time: Date.now() // time indicates particular clicks
          };
          this.setState({ cursorPos: cursorPos });
        };

        render() {

          return (
            <div
              onMouseUp={this.handleClick}
              onTouchStart={this.handleClick}
            >
              <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(54).webp" />
              <MDBWaves
                cursorPos={this.state.cursorPos}
              />
            </div>
          );
        }
      }

      export default CustomComponent;

API Reference: Waves Properties

The table below shows the configuration options of the MDBWaves component.

Name	Type	Default	Description	Example
`cursorPos`	Object		`Required!` The position and time of cursor click event.	`<MDBWaves cursorPos={{ top, left, time }} />`
`dark`	Boolean	`false`	Change wave color to dark.	`<MDBWaves cursorPos={this.state.cursorPos} dark />`