ivanzamarro

General Description

This pattern focuses on implementing reusable widgets in React that are exposed via an imperative API. Using useImperativeHandle, React's internal components can be controlled directly from the outside. This approach is ideal when a component needs to be managed outside React's normal flow, such as in applications integrating third-party systems or components with customized lifecycles.

In this case, we will document a general pattern for externally controllable widgets, using a simple example that demonstrates how to implement this functionality with an injectable key.

---

ivanzamarro

Style Encapsulation using Shadow DOM and Webpack

Objective: Ensure that styles from specific components don't bleed into the main DOM of the webpage, preserving the page's existing styles.

1. Initialization and Implementation of the Shadow DOM:

The code snippet below demonstrates how to initialize a React widget. This widget imports a stylesheet from an external library. The key here is that the styles from this external library don't affect the main page, thanks to the use of the Shadow DOM.

import React from "react";

ivanzamarro

How to fix infinite loop of Logitech GHub on OSX

TL;DR: The Logitech GHub application faces an issue where it gets stuck in an infinite loop during initialization. The image provided illustrates this problem. Different attempted solutions include reinstalling and updating the application, which did not work. A working solution involves editing ~/.zshrc or ~/.bashrc using an OSX terminal and including specific aliases. After this, the user needs to manually reload the file and then kill and relaunch the application using terminal commands.

sudo pkill -i lghub; sleep 5; open /Applications/lghub.app