Clarity Core is a suite of Web Components from theClarity Design System. Because Reactdoesn't fully interoperate with custom elements we have developed this library of React components that wrap Clarity Web Components

1. (Optional): Install the Clarity Core package from npm.

   npm install @cds/core --save

2. Install the Clarity React package from npm.

   npm install @cds/react --save

3. Import desired component into your JavaScript or TypeScript

   import{CdsModal,CdsModalActions,CdsModalContent,CdsModalHeader}from'@cds/react/modal';

4. 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*/}<CdsModalonCloseChange={this.handleCloseModalClick.bind(this,false)}><CdsModalHeader><h3cds-text="title">My Modal</h3></CdsModalHeader><CdsModalContent><divcds-layout="vertical gap:md p-y:xs"><pcds-text="body">Lorem Ipsum</p></div></CdsModalContent><CdsModalActions><divcds-layout="horizontal gap:sm align:right"><CdsButtononClick={this.handleCloseModalClick.bind(this,false)}action="outline">        Cancel</CdsButton><CdsButtononClick={this.handleCloseModalClick.bind(this,false)}>Ok</CdsButton></div></CdsModalActions></CdsModal>;

In Reactrefs provide a way to access DOM nodes orReact elements created in the render method. Because web components' lifecycle lives outside of react'slifecycle our components provide a way to use refs when the underlying web component has finished rendering:

importReactfrom'react';import{CdsButton}from'@cds/react/button';exportdefaultclassAppextendsReact.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><CdsButtonref={this.buttonRef}>Mybutton</CdsButton></div>);}}