Wrapping third party JS libraries in ReactJS

Question

I am trying to learn how to use 3rd party APIs like Google Map, or BrainTree Dropin UI, and make them into ReactJS components.

Along my research, I came across such an example of a project that wraps the Braintree (payment gateway) - https://github.com/Cretezy/braintree-web-drop-in-react/blob/master/src/index.js

Unfortunately I am not able to follow the code, in particular, I cannot understand the syntax in lines 22-23. They look like decorators, but I am not sure and/or how they work in this context.

Answer 1

How to wrap third party libraries?

There a lot of resources about the topic. You can start with the official React documentation as a first one - Integrating with Other Libraries.

Also there's already created React wrappers / integrations, with the libraries you asked for:

1. google-maps-react - A declarative Google Map React component using React. Also the library has a complete article how it works.
2. braintree-dropin-react - React component to integrate Braintree Drop-In UI (V3).

What's the purpose of the code you mention?

It's just a property declaration. I guess it's there for the sake of clarity, but with or without wrapper, instance declarations, the code will still behave in the same way.

Answer 2

The code you are talking about is the following:

class ... {
   ...

   wrapper;
   instance;

   ...
}

This is just a property declaration without giving a value, it's the same as:

class ... {
   ...

   wrapper = undefined;
   instance = undefined;

   ...
}

And nothing would actually happen if you removed that completely. If you inspect the code more, wrapper stores the DOM reference for the wrapping <div>, instance is the stored Braintree instance from componentDidMount.

It's possible ESLint rules enforce the declaration.