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.