Edit these docs Rate these docs

React Bootstrap Waves effect

React Waves - Bootstrap 4 & Material Design

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


        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).jpg"
                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.


        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).jpg" />
                <MDBWaves
                  cursorPos={this.state.cursorPos}
                />
              </div>
            );
          }
        }

        export default CustomComponent;
      

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs

React Bootstrap 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


      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.


      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).jpg" />
              <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 />