Updating tabComponents from components in React

[SanditZZ]

Here's how I update my custom tab components from components in React.

1. Pass props to the component

import { IDockviewPanelProps } from "dockview";

export interface ComponentParams {
  title: string;
  content: string;
}

const components = useMemo(
    () => ({
      file: (props: IDockviewPanelProps<ComponentParams>) => {
        return <Component props={props} />;
      }
    }),
    []
  );

2. Use the updateParameters method from props.api in your handler function inside your component

  const handleClick = (value: string) => {
    // Update params
    props.api.updateParameters({ content: value });
  };

3. Use useEffect to listen to props.api and use onDidParametersChange event listener from props.api and get the updated params from it to update the relevant state

    const [content, setContent] = useState<string>("");

    useEffect(() => {
      props.api.onDidParametersChange((e) => {
        // Update modified state
        setContent(e.content);
      });
    }, [props.api]);

---

If anyone has similar implementations or better solutions, please share!
This is a nice library. Thanks!