import { RippleContainer } from '@m_three_ui/m3ripple'; //import it
import '@m_three_ui/m3ripple/css' // import css

import styles from './some_css_file.module.css';

const YourComponent = () => {
  return (
    <RippleContainer
      isMaterial3 = {true}
      beforeRippleFn = {(event) =>{}}
      className = {styles.rippleContainer}
      rippleColor = "hsla(29,81%,84%,0.15)"
      sparklesColorRGB = "255 255 255"
      opacity_level1 = "0.4"
      opacity_level2 = "0.1"
      sparklesMaxCount = 2048
      divProps = {{}}
      onMouseDown = {() => {}}
      onTouchStart = {() => {}}
      onTouchMove = {() => {}}
      onMouseUp = {() => {}}
      onTouchEnd = {() => {}}
      onMouseLeave = {() => {}}
      onTouchCancel = {() => {}}
    >
      <div className={styles.children} />
    </RippleContainer>
  );
};

export default YourComponent;