@cds/react
v6.14.0
Published
Core component modules for Clarity React
Downloads
1,534
Readme
Clarity React Wrappers for Core Web Components
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
Installation
(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>;
Using refs
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>
);
}
}