Next best choice when Context is not applicable

Question

I need two React components to exchange data, but I cannot use React Context. That is something I have no control on, I am bringing two separate third party "widgets" to different areas of a same Web page.

What options do I have? For now, what I have done is create a standalone object that I am importing in both components. Are there any concerns with this, and is there a better way?

Shared object: PP_Properties.js

function PP_PropertiesFactory()  {
    let properties = {Property1: null, Property2: null, Property3: null};

    const updateProperties = ({targetProperty, newValue}) => properties[targetProperty] = newValue;

    return {...properties, updateProperties};
}

export const PP_Properties = PP_PropertiesFactory();

Widget 1 component

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {PP_Properties} from './PP_Properties';

export const Widget1Component = (props) => {
  // Use PP_Properties in this element
  // Update PP_Properties using the updateProperties() method
};

Widget 2 component

import * as React from 'react';
import * as ReactDom from 'react-dom';

import {PP_Properties} from './PP_Properties';

export class Widget2ComponentBuilder {
  // Consume PP_Properties in this element
  // Update PP_Properties using updateProperties()
}

export function Widget2Component() {
  return new Widget2ComponentBuilder();
};

Answer 1

After doing some reading, it seems that what I am asking for is a library that does global state management, such as Redux.

A full blown library is probably an overkill for my simple needs, so I am looking at more lightweight options. The names I've heard so far are mobx, ReactN, React Entities and React Capsule.

An even simpler approach is to keep my initial idea of an object imported and manipulated by both components. As @drew-reese said, it looked like an anti-pattern at first but that's actually how those state management libraries work.

Here is an example:

https://dev.to/muhammadawaisshaikh/the-simplest-way-to-share-data-between-two-unrelated-components-in-react-1md0