@cds/react v6.10.0
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>
);
}
}
1 month ago
3 months ago
5 months ago
9 months ago
8 months ago
9 months ago
10 months ago
6 months ago
8 months ago
10 months ago
8 months ago
6 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago