wm-components-react
This package is React-specific wrapper created for Watermark's component library so that you can use the components more easily in your React project, i.e., the same way you would any other React component. Implementing the components is slightly different than standard usage, which is documented here. The main differences:
-
Component names start with an uppercase letter and use CamelCase instead of kebab-case.
-
All events start with on
. For example, the pagination component's pageClicked
event will translate to onPageClicked
when using the React package.
Install
- Add the package as a dev dependency in the package.json file of your React project.
"wm-components-react": "git+https://gitnyc.taskstream.com/administrator/wm-components-react.git#[version number]"
- Install the package. (You may get a warning that the package depends on a later version of React. Just ignore this for now.)
npm install
- Set the mode and load Material Design icons. The mode should be set to the name of your product, e.g., "via" or "aqua".
<html dir="ltr" lang="en" mode="via"></html>
<head>
<link
href="https://cdn.materialdesignicons.com/3.6.95/css/materialdesignicons.min.css"
rel="stylesheet"
/>
...
</head>
Usage
import React, { Component } from "react";
import { WmDatepicker } from "wm-components-react/dist";
class Example extends Component {
render() {
return (
<WmDatepicker
label="Accessible Datepicker"
labelPosition="none"
onInput={}
/>
);
}
}