Is there a way to manually refresh the panel and values?

[szemyd]

I'd like to refresh values according to a change in an api result: I have now a few disabled inputs and if the user is authenticated I'd like to enable those.

Is there a way to do this?

Thanks in advance!

[birkir]

Give it your own state.

function SomeComponent() {
  const state = useState(0);
  const ctrl = useControl('foo', { state })
  const [value, setValue] = state;
  const onApiUpdate = (newValue) => {
    setValue(newValue);
  };
}

Or if you have the ID, you can get the "setter".

import { ControlsContext } from 'react-three-gui';

function SomeComponent() {
  const context = useContext(ControlsContext);
  const ctrl = useControl('foo', { id: 'c1' })
  const onApiUpdate = (newValue) => {
    const setValue = context.state.current.get('c1');
    setValue(newValue);
  };
}

[borg]

Testing this and found that using the id as set in the config would still return a null using the context.state.current.get('myId'). Tracing out the state seems to indicate the id is not actually stored in the state.

[JacobJaffe]

I'm unable to get this working with a basic use case.
using state does trigger an onChange for the new value, but does not seem to change the input itself.

const Comp = () => {
  const state = useState(0);
  const [value, set] = state;

  useControl("Foo", {
    type: "number",
    value: value,
    state: state,
    min: -5,
    max: 5,
    scrub: false,
    onChange: (v) => console.log(v), // This DOES get called with the new value
  });

  useEffect(() => {
    setTimeout(() => {
      set(1); // This does not update the displayed value; the input remains at the 0 position
    }, 1000);
  }, []);

  return null;
};

[lobis]

Hello @birkir, @ffdead,

Could you please provide a more detailed workaround for this issue? I have also tried @JacobJaffe and it indeed doesn't work.

In my particular use case I have a component that loads a 3D model into a state. My custom GUI component is a table of buttons each one pointing to one of the meshes of the model, since I have to load the model the state starts as undefined and I don't have access to the meshes.

I have tried many ways to update the GUI component after it has been loaded but the only way I could manage to do it is via document.querySelector(#id).appendChild which doesn't seem right.

Thanks.