mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 18:51:07 -04:00
[CoreRenderingService] Add dev docs (#218630)
## Summary Epic: https://github.com/elastic/kibana-team/issues/1435 New Dev Docs for Core Rendering Service <img width="902" alt="image" src="https://github.com/user-attachments/assets/aa1b8bdb-751d-4ab1-a0e1-8bf62c1c8d96" /> --------- Co-authored-by: Anton Dosov <dosantappdev@gmail.com> Co-authored-by: Jean-Louis Leysens <jloleysens@gmail.com>
This commit is contained in:
parent
ce705f65ee
commit
c764851f33
3 changed files with 42 additions and 3 deletions
|
@ -56,6 +56,11 @@ layout: landing
|
|||
title: 'Kibana Page Template',
|
||||
description: "Learn how to use Kibana Page Template for your app's page layout",
|
||||
},
|
||||
{
|
||||
pageId: 'kibDevRenderingService',
|
||||
title: 'Core Rendering Service',
|
||||
description: 'Learn how to provide the Kibana global context in your React apps',
|
||||
},
|
||||
{
|
||||
pageId: 'kibDevReactKibanaContext',
|
||||
title: 'Kibana React Contexts',
|
||||
|
|
30
src/core/packages/rendering/browser/README.mdx
Normal file
30
src/core/packages/rendering/browser/README.mdx
Normal file
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
id: kibDevRenderingService
|
||||
slug: /kibana-dev-docs/rendering-service
|
||||
title: Core Rendering Service
|
||||
description: This a service provided by SharedUX which abstracts the dependencies needed for a fully-loaded React context.
|
||||
tags: ['shared-ux', 'core', 'react', 'context']
|
||||
date: 2025-04-25
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
### Custom React elements require global context
|
||||
Kibana's browser-side architecture is an application composed of many different points where custom React elements can be mounted onto a DOM container. These elements have a self-contained component tree, this process is often described as an "ad-hoc" render. A self-contained component tree has no awareness of global context or stateful core services, such as i18n and theming which are often needed. That is why we use shared context providers.
|
||||
|
||||
### Adding the global context
|
||||
The public contract Core Rendering Service offers a wrapper to add context to your React elements. The wrapper uses its own internal state to handle the dependencies needed for each internal context provider, so developers do not have to worry about passing many services from the CoreStart contract. There is only a single service to pass down, the Core Rendering Service, which is available in the CoreStart contract as `core.rendering`.
|
||||
|
||||
## Example
|
||||
|
||||
This React 16 example adds context from the Core Rendering Service to the `MyApplication` component, and then mounts it to the DOM.
|
||||
|
||||
```tsx
|
||||
const renderApp = ({ core, targetDomElement }: { core: CoreStart; targetDomElement: HTMLElement; }) => {
|
||||
ReactDOM.render(core.rendering.addContext(<MyApplication />), targetDomElement);
|
||||
return () => ReactDOM.unmountComponentAtNode(targetDomElement);
|
||||
};
|
||||
```
|
||||
|
||||
## See Also
|
||||
- <DocLink id="kibDevReactKibanaContext" />
|
|
@ -7,15 +7,19 @@ tags: ['kibana', 'dev','shared-ux', 'react', 'context']
|
|||
date: 2023-07-25
|
||||
---
|
||||
|
||||
## Notes:
|
||||
- This document describes the **legacy** React context providers that make available the common services needed for internal components.
|
||||
- A replacement service is available from SharedUX that abstracts the dependencies needed for a fully-loaded React context: <DocLink id="kibDevRenderingService" />.
|
||||
|
||||
## Description
|
||||
|
||||
Kibana uses React Context to manage several global states. Those states have been divided into several reusable components in relevant packages.
|
||||
|
||||

|
||||
|
||||
- `KibanaRootContextProvider` - A root context provider for Kibana. This is the top level context provider that wraps the entire application. It is responsible for initializing all of the other contexts and providing them to the application.
|
||||
- `KibanaRenderContextProvider` - A render context provider for Kibana. This context is designed to be used with ad-hoc renders of React components, (usually with `ReactDOM.render`).
|
||||
- `KibanaThemeContextProvider` - A theme context provider for Kibana. A corollary to EUI's `EuiThemeProvider`, it uses Kibana services to ensure the EUI Theme is customized correctly.
|
||||
- <DocLink id="react/context/root" text="`KibanaRootContextProvider`" /> - A root context provider for Kibana. This is the top level context provider that wraps the entire application. It is responsible for initializing all of the other contexts and providing them to the application.
|
||||
- <DocLink id="react/context/render" text="`KibanaRenderContextProvider`" /> - A render context provider for Kibana. This context is designed to be used with ad-hoc renders of React components, (usually with `ReactDOM.render`).
|
||||
- <DocLink id="react/context/theme" text="`KibanaThemeContextProvider`" /> - A theme context provider for Kibana. A corollary to EUI's `EuiThemeProvider`, it uses Kibana services to ensure the EUI Theme is customized correctly.
|
||||
|
||||
## Deprecated Context Providers
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue