Callback props

[mwilliamson]

Hello! I've started using React Cosmos on a project, and I'm curious what the typical way of handling callback props, such as onClick for a button component, is?

In my mind, it'd be nice to have a pane that's an event log or something, and then pass in a callback that writes even event to that log. So, the fixture would be something like:

export default () => {
  const action = useFixtureAction("onClick");
 
  return <Button count={count} onClick={() => action()}>Save</Button>;
};

I had a look around in the docs, and the only example I could find was using useState() in the fixture, whereas I'd like to use something that can be reused across components. Apologies if I've missed something!

Assuming that something like this doesn't already exist, would it make more sense just to build it as an ordinary React component and use from within the fixture, or to write it as a plugin? The advantage of the latter is presumably that the event log could be rendered as part of the React Cosmos UI proper?

[ovidiuch]

Hi @mwilliamson,

There's no specific functionality in Cosmos for handling callback events. I generally just log stuff in the browser console.

You could build something generic that can be reused across fixtures in two ways:

• Create a decorator that exposes a callback for handling an action via context that can be used inside fixtures. The decorator can render the action pane globally but it will be renderered inside the preview iframe.
• If you want to venture into something more ambitious you can create a plugin like you said and add a pane in the Cosmos UI. You can store the actions with useFixtureState into fixture state that can be read by a Cosmos UI plugin.

Let me know if you have other questions and if you create something for yourself do share with us :).

[mwilliamson]

That all makes sense, thanks for the explanation! And indeed, thanks for making Cosmos in the first place, the simplicity of use has been a delight.