# Creating custom Kibana plugin in React

**URL:** <https://discuss.elastic.co/t/creating-custom-kibana-plugin-in-react/156012>\
**Category:** Kibana\
**Created:** [November 9, 2018, 9:07am UTC](https://discuss.elastic.co/t/creating-custom-kibana-plugin-in-react/156012 "2018-11-09T09:07:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![MishMick](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@MishMick](https://discuss.elastic.co/u/MishMick)\
**Post date:** [November 9, 2018, 9:07am UTC](https://discuss.elastic.co/t/creating-custom-kibana-plugin-in-react/156012/1 "2018-11-09T09:07:23Z")

</div>

I want to create custom Kibana plugin in React rather than AngularJS. I have written a simple React component and imported it in my main file as

```
return VisFacory.createReactVisualization({
      visConfig: {
          component: ReactComponent;
          .....
          .....
      }
});

My react component file is : 

import ....
class ReactComponent extends Component{
   render(){
      return (
         <div>Simple react plugin</div>
      );
}
}
ReactDOM.render(<ReactComponent/>);

```

Is this the correct way to go about it because I am getting an error stating

Uncaught Invariant Violation : Minified React error #200. What does the error signify?

---

<div class="post-metadata">

**Author:** ![umed](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/umed/32/37506_2.png) [@umed](https://discuss.elastic.co/u/umed)\
**Post date:** [November 9, 2018, 1:26pm UTC](https://discuss.elastic.co/t/creating-custom-kibana-plugin-in-react/156012/2 "2018-11-09T13:26:40Z")

</div>

Hi Mishal,

Some fixes:

Your `ReactComponent` should avoid `ReactDOM.render` and just export your component. So, it should looks like this:

```
import ....
export default class ReactComponent extends Component{
   render(){
      return (
         <div>Simple react plugin</div>
      );
  }
}

```

Your component will be rendered by kibana for this reason you are specifying your component in `visConfig`. 🙂

---

<div class="post-metadata">

**Author:** ![MishMick](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@MishMick](https://discuss.elastic.co/u/MishMick)\
**Post date:** [November 10, 2018, 10:27am UTC](https://discuss.elastic.co/t/creating-custom-kibana-plugin-in-react/156012/3 "2018-11-10T10:27:31Z")

</div>

Hi, I implemented the react component as you mentioned. However I ran into another problem. Here are my files

app.js

```
import { CATEGORY } from 'ui/vis/vis_category';
import { VisFactoryProvider } from 'ui/vis/vis_factory';
import {Schemas} from 'ui/vis/editors/default/schemas';
import {VisTypesRegistryProvider} from 'ui/registry/vis_types';
import {ReactComponent} from './vis/ReactComponent';

const MynewVisType = (Private) => {
    const visFactory = Private(VisFactoryProvider);
    return visFactory.createReactVisualization({
        name: 'ml_d3',
        title: 'D3',
        icon: 'fa fa-eye',
        description: 'Cool new d3 chart',

        category: CATEGORY.OTHER,
        visConfig: {
            component: ReactComponent
        }
    });
}

VisTypesRegistryProvider.register(MynewVisType);
export default MynewVisType;

```

index.js:

```
export default function(kibana){
    return new kibana.Plugin({
        uiExports:{
            visTypes:[
                'plugins/d3kib/app'
            ]
        }
    });
}

```

ReactComponent.js

```
import React, {Component} from "react";
export default class ReactComponent extends Component{
   render(){
      return (
         <div>Simple react plugin</div>
      );
  }
}

```

package.json

```
{
    "name": "d3kib",
    "main": "index.js",
    "version": "1.0.0",
    "description": "Plugin to integrate d3 scripts",
    "kibana": {
        "version": "6.3.2"
    },
    "dependencies": {
        "ansi-to-html": "0.6.4",
        "handlebars": "4.0.6",
        "lodash.escape": "4.0.1",
        "lodash.get": "4.4.2",
        "lodash.set": "4.3.2",
        "react": "16.0.0"
    }
}

```

I am getting the error:

 ![32%20PM](https://us1.discourse-cdn.com/elastic/original/3X/2/d/2d89472e3a3773accd28d5cc22e51092eed6164b.png)

Is there something I might be missing? 🙂

---

<div class="post-metadata">

**Author:** ![umed](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/umed/32/37506_2.png) [@umed](https://discuss.elastic.co/u/umed)\
**Post date:** [November 10, 2018, 9:19pm UTC](https://discuss.elastic.co/t/creating-custom-kibana-plugin-in-react/156012/4 "2018-11-10T21:19:08Z")

</div>

I'm not sure that your problem is it, but for kibana 6.3 you should use `template: ReactComponent` instead of `component: ReactComponent` ([docs](https://www.elastic.co/guide/en/kibana/6.3/development-visualization-factory.html#development-react-visualization-type)).

Actually, I'm using kibana 6.4 and writing plugins for it. I may not know some specific settings for kibana 6.3.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [December 8, 2018, 9:21pm UTC](https://discuss.elastic.co/t/creating-custom-kibana-plugin-in-react/156012/5 "2018-12-08T21:21:25Z")

</div>

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