The onChange prop is not updated on every render.

[nicu-chiciuc]

The onChange prop is passed to the font-picker constructor during the initialization of the component. This means that changing the onChange prop will not change the callback that was passed initially.
Since I'm using hooks for my component this means that no matter what changes, the FontPicker will always call the initially passed callback.

[samuelmeuli]

Hi @nicu-chiciuc, thanks for letting me know about this problem.

You're right, the onChange prop is currently not reactive, the docs on this were incorrect. Sorry about that. I'd argue that you don't normally need it to be, though. Could you give me a possible use case?

I've implemented the project's examples with hooks as well (see this file). Maybe it wasn't working for you because of this bug. Could you please let me know if you're still encountering problems with the latest release?

[nicu-chiciuc]

Sorry for the very late reply. I've solved the issue by sending a function which calls another function that is updated using a ref. The problem with your hooks example is that the passed anonymous function passed to onChange will be the first one that was created during initialization.

// HACK: The FontPicker component will not change the `onChange` prop
  if (setFontRef) {
    setFontRef.current = setFontFamilyCurrent;
  }
  const setFontFamilyInitial = (newFont: { family: string }) => {
    if (setFontRef && setFontRef.current) {
      setFontRef.current(newFont);
    }
  };

The setFontFamilyCurrent function will be the one that is updated on each rerender.

[samuelmeuli]

Thanks for your response. I've just made the onChange prop reactive. Your code should work without the workaround with the new release.

[nicu-chiciuc]

Thank you @samuelmeuli