Using USWDS 3.0 in React/Storybook

[jbouder]

I'm trying to build a new component library using React and Storybook. Instead of loading in the static files, i'm trying to let all of the bundling under the hood do its thing. I have the SCSS being loaded in properly, just trying to get the JavaScript to work. I've followed these steps when using USWDS 2.0, but I'm thinking they are no longer accurate: https://designsystem.digital.gov/documentation/developers/#js-customization. Specifically the part where I'm importing Accordion module and trying to use a hook to call the .on method to enable the accordion for toggling. TIA!

[jbouder]

Nm, figured it out. Had to do the import like this:
import { accordion } from '@uswds/uswds/src/js/components';

[jbouder]

I'm importing into my component like this:
import tooltip from '@uswds/uswds/js/usa-tooltip';

Then initializing the JS using the useLayoutEffect hook like this:
const tooltipRef = useRef<HTMLSpanElement>(null);
useLayoutEffect(() => {
const tooltipElement = tooltipRef.current;
tooltip.on(tooltipElement);
return () => tooltip.off(tooltipElement);
});

[charmcitygavin]

Thank you! That was the missing piece. I had to import it this way to get it to work:

import tooltip from "@uswds/uswds/packages/usa-tooltip/src";

but now it's working great. Thank you @jbouder!

[charmcitygavin]

This also works for me:

import tooltip from "@uswds/uswds/packages/usa-tooltip/src";

And then I initialize the JS with useEffect():

  useEffect(() => {
    tooltip.on();
    return () => tooltip.off();
  });

Seems to be working great. Is there a particular reason you opted to use useRef and useLayoutEffect()? It works great that way too. I just want to make sure I'm not walking straight into a known issue 😄

[jbouder]

I believe the useRef is needed if you anticipate using more than 1 tooltip on the page. That will allow you to have individual references to each element, then toggle on/off as needed...that said though, this bit of code was from our original use of USWDS 2, it might be that its not necessary anymore.

In terms of useLayoutEffect, I believe that was just to prevent any weird layout blips during rerendering, but probably not necessary.

[huynhvienan]

Rất tuyệt vời.