React — Why you should start integrating non-React libraries with React context

React context is a tool to pass data through the component tree without having to pass props down manually at every level. It is a relatively unpopular and optional feature. It is totally possible to build a stunning application without using React context. Some React developers may not even have ever heard about React context at all. However, do you know React context is an extremely powerful tool for third-party library integration? If you don’t already know that, let me introduce how you can do it using the Google map library as an example.

Image from Kaseya

What We’re Building

First, we are going to build a completely standalone and self-contained component - GoogleMap, which will render the map itself. After that, we will build a sub-component, which we can use to add markers to the map. They will be connected through React context and we will be able to use the components like this:

<GoogleMap>
  <Marker lat={1} lng={2}></Marker>
  <Marker lat={3} lng={4}></Marker>
  <Marker lat={5} lng={6}></Marker>
</GoogleMap>

Let’s Code

Dependencies

As loading the Google map script isn’t the focus of this guide, the Google Maps JavaScript API Loader will be used to load the Google…