Installation
To use the component library, you need to get the files (currently only available as a Node package), make them available in your app (copying them to your build directory), then load the entry file. The library also relies on the Material Design icons, so you need to load these as well.
Installing Core Library
-
Add the package:
npm i @watermarkinsights/ripple
-
Include the icons:
<link href="https://cdn.materialdesignicons.com/3.6.95/css/materialdesignicons.min.css" rel="stylesheet">
-
Import the loader and polyfill functions:
import { applyPolyfills, defineCustomElements } from '@watermarkinsights/ripple/dist/loader';
-
Call them to load the components:
applyPolyfills().then(() => { defineCustomElements(); });
Installing React Wrappers
If your project uses React, install this instead of the core library to use the Ripple component the React way. The components' names and props will be CamelCased rather than hyphenated,
and you will be able to hook to events directly on the component (e.g. onWmEventTriggered=...
), rather than .addEventListener("wmEventTriggered", ...)
.
-
Add the package:
npm i @watermarkinsights/ripple-react
-
Include the icons:
<link href="https://cdn.materialdesignicons.com/3.6.95/css/materialdesignicons.min.css" rel="stylesheet">
-
Import the components at the top of your file:
import { WmButton, WmSelect, WmOption } from '@watermarkinsights/ripple-react';