How to share components among Kibana plugins?

Elastic Stack Kibana
1

I'm create several Kibana plugins that reuse some components. How can I properly share the components among them?

What I'm doing now is to create a blank plugin (no APIs and UI exports), let say "plugin_commons". In "plugin_common", I export a shared component named "DateRangePicker". And then, from *.jsx files of some other plugins, I import the components using something like:
import { DateRangePicker } from '../../../../plugin_commons/components';

Am I doing it right way? Or any better way?
Thank a lot!

2

Ok, I got some links about this. Hope them help.


3

Hi @lvdiev,

your approach sounds good to me. This is almost how Kibana is internally organized - check out the kibana_react package here: https://github.com/elastic/kibana/tree/master/src/plugins/kibana_react

It's also providing various components which are used by several other plugins.

To follow the rules in their strictest form, the components should be re-exported by the index.ts/js file in the public folder in your commons plugin - plugins should never reach into the folder structure of another plugin but always use the top level export. This helps with keeping individual plugins separate (because you can re-organize the inner workings of a plugin without touching anything else as long as the public things exported from the top level are staying the same).

1 Like
4

Thank you for your suggestion. That way worked like a charm. I just want to summarize it as following:

  • Commons plugin: export all components in public/index.ts
    export {DateRangePicker} from './components/DateRangePicker';
    export {AnyComponent} from './components/AnyComponent';

  • from others plugin's .tsx file: use
    import {DateRangePicker} from 'plugins/plugins_commons';
    to import DateRangePicker

5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.