# React integration

Mount the framework-independent library inside a React component.

Source: https://warcraftforever.com/developers/recipes/react/

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

```jsx
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.