React integration | Warcraft Forever Developers

Load https://warcraftforever.com/talents/latest.js before rendering this component. The library owns its Shadow DOM; your React tree owns the empty container.

function TalentSelector({ classSlug, onSave }) {
  const container = useRef(null);

  useEffect(() => {
    const talents = WarcraftForever.Talents.mount(container.current, {
      class: classSlug,
      maxLevel: 30,
    });
    const unsubscribe = talents.on('submit', onSave);
    talents.ready.catch((error) => {
      // Replace with your application's error display.
      console.error(error);
    });
    return () => {
      unsubscribe();
      talents.destroy();
    };
  }, [classSlug, onSave]);

  return <div ref={container} />;
}

Import useEffect and useRef from React. Keep onSave stable with useCallback if re-renders should preserve an unfinished build. Always destroy the instance during cleanup, including React’s development setup/cleanup cycle.

For server-rendered applications, load and mount only in the browser. Do not import the classic script as a server module.