Clarity Core is a suite of Web Components from the Clarity Design System. Because React doesn't fully interoperate with custom elements we have developed this library of React components that wrap Clarity Web Components
-
(Optional): Install the Clarity Core package from npm.
npm install @cds/core --save
-
Install the Clarity React package from npm.
npm install @cds/react --save
-
Import desired component into your JavaScript or TypeScript
import { CdsModal, CdsModalActions, CdsModalContent, CdsModalHeader } from '@cds/react/modal';
-
Use React wrapped Web Component in React
{ /* Example of a modal web component in React with React Shim - size - attribute style hook - open - setting the 'open' property on the element - openChange - listen for the `openChange` custom event */ } <CdsModal onCloseChange={this.handleCloseModalClick.bind(this, false)}> <CdsModalHeader> <h3 cds-text="title">My Modal</h3> </CdsModalHeader> <CdsModalContent> <div cds-layout="vertical gap:md p-y:xs"> <p cds-text="body">Lorem Ipsum</p> </div> </CdsModalContent> <CdsModalActions> <div cds-layout="horizontal gap:sm align:right"> <CdsButton onClick={this.handleCloseModalClick.bind(this, false)} action="outline"> Cancel </CdsButton> <CdsButton onClick={this.handleCloseModalClick.bind(this, false)}>Ok</CdsButton> </div> </CdsModalActions> </CdsModal>;
In React refs provide a way to access DOM nodes or React elements created in the render method. Because web components' lifecycle lives outside of react's lifecycle our components provide a way to use refs when the underlying web component has finished rendering:
import React from 'react';
import { CdsButton } from '@cds/react/button';
export default class App extends React.Component<{}, {}> {
buttonRef: React.RefObject<CdsButton>;
constructor(props: any) {
super(props);
this.buttonRef = React.createRef<CdsButton>();
}
componentDidMount() {
this.buttonRef.current.nativeElement.then(element => {
element.focus();
});
}
render() {
return (
<div>
<CdsButton ref={this.buttonRef}>My button</CdsButton>
</div>
);
}
}