mirror of
https://github.com/elastic/kibana.git
synced 2025-06-30 03:53:20 -04:00
32 lines
1.7 KiB
Markdown
32 lines
1.7 KiB
Markdown
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
|
|
[Home](./index.md) > [kibana-plugin-plugins-embeddable-public](./kibana-plugin-plugins-embeddable-public.md) > [EmbeddableRenderer](./kibana-plugin-plugins-embeddable-public.embeddablerenderer.md)
|
|
|
|
## EmbeddableRenderer variable
|
|
|
|
Helper react component to render an embeddable Can be used if you have an embeddable object or an embeddable factory Supports updating input by passing `input` prop
|
|
|
|
<b>Signature:</b>
|
|
|
|
```typescript
|
|
EmbeddableRenderer: <I extends EmbeddableInput>(props: EmbeddableRendererProps<I>) => JSX.Element
|
|
```
|
|
|
|
## Remarks
|
|
|
|
This component shouldn't be used inside an embeddable container to render embeddable children because children may lose inherited input, here is why:
|
|
|
|
When passing `input` inside a prop, internally there is a call:
|
|
|
|
```ts
|
|
embeddable.updateInput(input);
|
|
|
|
```
|
|
If you are simply rendering an embeddable, it's no problem.
|
|
|
|
However when you are dealing with containers, you want to be sure to only pass into updateInput the actual state that changed. This is because calling child.updateInput(<!-- -->{ foo }<!-- -->) will make foo explicit state. It cannot be inherited from it's parent.
|
|
|
|
For example, on a dashboard, the time range is inherited by all children, unless they had their time range set explicitly. This is how "per panel time range" works. That action calls embeddable.updateInput(<!-- -->{ timeRange }<!-- -->), and the time range will no longer be inherited from the container.
|
|
|
|
see: https://github.com/elastic/kibana/pull/67783\#discussion\_r435447657 for more details. refer to: examples/embeddable\_explorer for examples with correct usage of this component.
|
|
|