ae9is / react-fontpicker Goto Github PK

There isn't any way to change the styling right now. I tried the styles.css selectors references but the font selector breaks.

Could rewrite font preview generation to generate SVG font previews at some point

ref: https://github.com/ae9is/react-fontpicker/tree/main/packages/fontpicker/scripts#notes

I was using your great component to set the font in Redux state and use its value in a canvas, but I encountered a problem where the canvas was re-rendering faster than the font could load.

so there was no change in canvas

"I fixed this problem by adding import FontFaceObserver from "fontfaceobserver";"

` const handleFontChange = (font) => {
const fontObserver = new FontFaceObserver(font);

fontObserver.load().then(() => {
  dispatch(
    setSettings({
      ...settings,
      printAreas: settings.printAreas.map((area) =>
        area.id === printArea.id
          ? { ...area, texts: area.texts.map((t) => (t.id === textId ? { ...t, font: font } : t)) }
          : area
      ),
    })
  );
});

};
`

I suggest adding this library directly in the component, so that the value returned in value={(font) => { example(font); }}
is only returned after the font has finished loading ; )

Hello,

I'm trying to make this work with my app, but the defaultValue looks like it's only working the first time the font picker mounts.

This is the small code where I see it's not working:

<FontPicker defaultValue={currentLayer.font} value={(font) => handleValueChange(font, "font")} />
should be: {currentLayer.font}

The should be part is updating correctly, but not the picker.

Thanks in advance!