GDS Web + React

Because the support for web components is a little tricky, we have a couple of ways that we can consume web components in a React project.

#1

You can use the web component directly. Importing in and using it. The below snippet will show us we can render and fire and event on a gds-button using both methods.

  • Snippet

    import React from "react";
    import { GDSButton } from "../components/Button";
    import "@nielsen-media/gds-styles/scss/index.scss";
    import { Link } from "react-router-dom";
    
    const sizes = ["jumbo", "regular", "compact", "tiny"];
    
    export const Button = () => {
      return (
        <>
          <gds-button
            icon="arrow-left"
            icon-position="left"
            background="solid"
            color="primary"
            mode="dark"
            onClick={(e) => console.log("Fire", e)}
          >
            Click me
          </gds-button>
          <h2>Button - Light mode</h2>
          <div className="d-flex m-space-300">
            {sizes.map((size) => (
              <GDSButton
                background="solid"
                color="primary"
                size={size}
                mode="light"
                label="Label"
                on-click={(e) => console.log(e)}
              />
            ))}
          </div>
        </>
      );
    };
    
    export default Button;
    

#2

Install it

npm i lit-labs/react

NOTE: Because the support for Web Components in React isn’t great we have to do some extra work to get the to work properly. We are going to use a package from lit-labs/react this will help us set up our web-components a bit better.

You can read here and here about some of the hardship of Web Components + React. Also check out the documentation for lit-labs/react to use Web Components in React.