How to use the @material/ripple.MDCRipple function in @material/ripple

initRipple() {
		// a stupid hack for the test environment where this ends up undefined
		if (process.env.NODE_ENV === 'test') {
			this.el.dataset = {};
		}

		this.api = new MDCRipple(this.el);
		this.checkProps(this.props);
	}

mounted() {
        if (this.interactive)
            this.mdcRipple = new MDCRipple(this.$el)
    },
    destroyed() {

        listControl.listElements.map((listItemEl) => new MDCRipple(listItemEl))
        listControl.listen('MDCList:action', (evt: any) => {

Object.keys(this.refs).forEach((ref) => {
			const el = this.refs[ref];
			if (el) {
				const element = ReactDOM.findDOMNode(el);
				if (element) {
					(element as HTMLElement).classList.add("mdc-ripple-surface");
					(element as HTMLElement).setAttribute("data-mdc-ripple-is-unbounded", "");
					const r = new MDCRipple(element);
				}
			}
		});
	}

this.shadowRoot.querySelectorAll('.ripple').forEach(dom => {
			new MDCRipple(dom)
		})
	}

this.shadowRoot.querySelectorAll('.mdc-chip').forEach(item => {
        new MDCRipple(item)
      })
    }

mounted() {
        if (this.interactive)
            this.mdcRipple = new MDCRipple(this.$el)
    },
    destroyed() {

        <button> this.ripple = el &amp;&amp; new MDCRipple(el)}&gt;Angled Corners</button>
        <div></div>

mounted() {
        this.mdcTextfield = new MDCTextfield(this.$el)
       
        if (this.interactive && this.box)
            this.mdcRipple = new MDCRipple(this.$el)
    },
    destroyed() {