* bump @typescript-eslint deps * update rules * fix errors in pacakges * fix src/ * fix x-pack * fix test * fix typings * fix examples * allow _ as prefix and suffix * roll back prefix and suffix changes * add eslint-plugin-eslint-comments * report unused rules * remove unused eslint comments from tests * remove unused eslint comments 2nd pass * remove unused eslint comments from src/ * remove unused comments in x-pack * use no-script-url and no-unsanitized/property for ts files * remove unused eslint comments * eui/href-or-on-click removed when not complained * no import/* rules for ts files * cleanup * remove the unused eslint-disable * rollback unnecessary changes * allow underscore prefix & sufix in type name * update docs * fix type error in enterprise search plugin mocks * rename platform hack __coreProvider --> _coreProvider * rollback space removal in src/core/public/legacy/legacy_service.test.ts * fix naming convention in APM |
||
---|---|---|
.. | ||
public | ||
kibana.json | ||
README.md |
kibana-react
Tools for building React applications in Kibana.
Context
You can create React context that holds Core or plugin services that your plugin depends on.
import { createKibanaReactContext } from 'kibana-react';
class MyPlugin {
start(core, plugins) {
const context = createKibanaReactContext({ ...core, ...plugins });
}
}
You may also want to be explicit about services you depend on.
import { createKibanaReactContext } from 'kibana-react';
class MyPlugin {
start({ notifications, overlays }, { embeddable }) {
const context = createKibanaReactContext({ notifications, overlays, embeddable });
}
}
Wrap your React application in the created context.
<context.Provider>
<KibanaApplication />
</context.Provider>
Or use already pre-created <KibanaContextProvider>
component.
import { KibanaContextProvider } from 'kibana-react';
<KibanaContextProvider services={{ ...core, ...plugins }}>
<KibanaApplication />
</KibanaContextProvider>
<KibanaContextProvider services={{ notifications, overlays, embeddable }}>
<KibanaApplication />
</KibanaContextProvider>
Accessing context
Using useKibana
hook.
import { useKibana } from 'kibana-react';
const Demo = () => {
const kibana = useKibana();
return (
<div>
{kibana.services.uiSettings.get('theme:darkMode') ? 'dark' : 'light'}
</div>
);
};
Using withKibana()
higher order component.
import { withKibana } from 'kibana-react';
const Demo = ({ kibana }) => {
return (
<div>
{kibana.services.uiSettings.get('theme:darkMode') ? 'dark' : 'light'}
</div>
);
};
export default withKibana(Demo);
Using <UseKibana>
render prop.
import { UseKibana } from 'kibana-react';
const Demo = () => {
return (
<UseKibana>{kibana =>
<div>
{kibana.services.uiSettings.get('theme:darkMode') ? 'dark' : 'light'}
</div>
}</UseKibana>
);
};
uiSettings
service
Wrappers around Core's uiSettings
service.
useUiSetting
hook
useUiSetting
synchronously returns the latest setting from CoreStart['uiSettings']
service.
import { useUiSetting } from 'kibana-react';
const Demo = () => {
const darkMode = useUiSetting<boolean>('theme:darkMode');
return (
<div>
{darkMode ? 'dark' : 'light'}
</div>
);
};
Reference
useUiSetting<T>(key: string, defaultValue: T): T;
useUiSetting$
hook
useUiSetting$
synchronously returns the latest setting from CoreStart['uiSettings']
service and
subscribes to changes, re-rendering your component with latest values.
import { useUiSetting$ } from 'kibana-react';
const Demo = () => {
const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
return (
<div>
{darkMode ? 'dark' : 'light'}
</div>
);
};
Reference
useUiSetting$<T>(key: string, defaultValue: T): [T, (newValue: T) => void];
overlays
service
Wrapper around Core's overlays
service, allows you to display React modals and flyouts
directly without having to use react-dom
library to mount to DOM nodes.
import { createKibanaReactContext } from 'kibana-react';
class MyPlugin {
start(core) {
const { value: { overlays } } = createKibanaReactContext(core);
overlays.openModal(
<div>
Hello world!
</div>
);
}
}
overlays.openModal
— opens modal window.overlays.openFlyout
— opens right side panel.
You can access overlays
service through React context.
const Demo = () => {
const { overlays } = useKibana();
useEffect(() => {
overlays.openModal(
<div>
Oooops! {errorMessage}
</div>
);
}, [errorMessage]);
};
notifications
service
Wrapper around Core's notifications
service, allows you to render React elements
directly without having to use react-dom
library to mount to DOM nodes.
import { createKibanaReactContext } from 'kibana-react';
class MyPlugin {
start(core) {
const { value: { notifications } } = createKibanaReactContext(core);
notifications.toasts.show({
title: <div>Hello</div>,
body: <div>world!</div>
});
}
}
notifications.toasts.show()
— show generic toast message.notifications.toasts.success()
— show positive toast message.notifications.toasts.warning()
— show warning toast message.notifications.toasts.danger()
— show error toast message.
You can access notifications
service through React context.
const Demo = () => {
const { notifications } = useKibana();
useEffect(() => {
notifications.toasts.danger({
title: 'Oooops!',
body: errorMessage,
});
}, [errorMessage]);
};