Customizing the ResultDisplay Component in API Playground

[LeCarteloo]

Hi,
Is it possible to extend the API Playground? I’d like to customize it so that if the response contains a specific property, I can render a video using the URL from that property.

Is there a way to add this component using a CLI or some other method? Essentially, I want to retain all the functionality of API Playground but modify the ResultDisplay component.

[fuma-nama]

The playground is a single component which isn't customisable, you probably need to clone and modify it

I can expose more options if applicable

[LeCarteloo]

Thanks for the response - I used patch-package to make some modifications. Specifically, I added an onQueryFinish callback to the APIPlayground, which executes when a test query completes (query response as argument). Additionally, I introduced a renderResult prop to hide the default RenderResult. The solution works, but it can definitely be implemented better. I think this functionality could be useful for others, so if I find the time, I'll refine it further and propose enhancement.

// source.tsx
export const openapi = createOpenAPI({
  renderer: {
    APIPlayground: (props) => <CustomAPIPlayground {...props} />
  },
});

// custom-api-playground.tsx

...

return (
  <>
    <FumaAPIPlayground {...props} onQueryFinish={handleQueryFinish}  renderResult={false}/>
    {response ? <APIResponse data={response} /> : null}
  </>
);