React-Redux how to export component function to window object

Question

I am building a React-redux library that displays a widget chat. The library should provide an interface allowing the client to configure and understand the state of the library and, render widgets into their document.

I use Webpack for the build process. I use Twilio-Chat library for the chat features.

My index file looks like this:

Index.js

import MyChatWidget from 'components/MyChatWidget';
export default {
widgets: {
   MyChatWidget: {
      render: (args) => {
          ReactDOM.render(
              <MyChatWidget />
          );
      },
      logout: () => {
         // this function should call a the logout in the MyChatWidget 
         // React Component
      }
   }
}

MyChatWidget

import Chat from 'twilio-chat';
class MyChatWidget extends Component {
    logout() {
        Chat.shutdown()
    }
}

export default connect()(MyChatWidget);

The logout is exposed to the client and it should call a function inside the MyChatWidget component.

How can I achieve this behaviour? Am I including the Twilio Chat in the wrong place(MyChatWidget Component)?

I read this article for the building with webpack (https://codeburst.io/building-react-widget-libraries-using-webpack-e0a140c16ce4)

Joshua Underwood · Accepted Answer · 2017-11-08 17:19:08Z

1

Disclaimer: I'm not a huge fan of putting anything on the window object, especially because if you use server rendering the window isn't available. But passing an instance of your class to the window object would make it accessible anywhere JS has access to the window object.

constructor() { super(); if ( window ) { window.mychatwidget = this; } }

answered Nov 8, 2017 at 17:19

Joshua Underwood

9275 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joshua Underwood · Accepted Answer · 2017-11-08 16:22:53Z

0

You can declare the logout method static and access that method as MyChatWidget.logout() in your index.js

answered Nov 8, 2017 at 16:22

Joshua Underwood

9275 silver badges15 bronze badges

2 Comments

Joshua Underwood Over a year ago

Also there is no reason to have logout(): () => rather than logout: () =>

enricop89 Over a year ago

logout(): () => was a syntax error. Sorry I cannot have the logout method static because I need to use this inside

Collectives™ on Stack Overflow

React-Redux how to export component function to window object

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related