Nimble Prime Musketeers

    @clr/react
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.15 • Public • Published

    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

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

      npm install @clr/core --save
    2. Install the Clarity React package from npm.

      npm install @clr/react --save
    3. Import desired component into your JavaScript or TypeScript

      import { CdsModal, CdsModalActions, CdsModalContent, CdsModalHeader } from '@clr/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
      */
      }
      <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 '@clr/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>
        );
      }
    }

    Keywords

    none

    Install

    npm i @clr/react

    DownloadsWeekly Downloads

    38

    Version

    4.0.15

    License

    MIT

    Unpacked Size

    1.41 MB

    Total Files

    111

    Last publish

    Collaborators

    • steve-haar
    • ashleyryan
    • gnomeontherun
    • mathisscott
    • hippeelee
    • shijir
    • coryrylan
    • jinnie
    • bdryanovski
    • bbogdanov