To make things clear— this blog post _is not _about the react-widgets library.

What do I mean by “widgets”, then?

Widgets are reusable components that handle both logic/data-fetching and presentation.

Before you accuse me of blasphemy for suggesting not to separate UI and logic, let me give you a few examples that might convince you there’s a place for nuance in the all-mighty rule/pattern of ‘smart-dumb’, ‘presentational-container’, etc.

Use Cases for Widget Components

• **When building a component that’s function is tightly coupled to a specific service **(for example, a weather widget).
• When a UI component and data/logic component, are used together more often than not.
• A reusable component is a component that is often reused — that should be the top criteria for defining the limits of reusable blocks of code. If component A is used together with component B, 90% of the times — they should be shared/published as a single reusable component (at least, as well as separately).
• When building multiple apps/static sites around a single headless CMS.
• If the data source is constant for all apps, it could make more sense to have reusable components manage both UI and data-fetching. That could also enable low-code compositions that can be done by marketing and content teams (instead of software engineers).
• When building (public) static websites that fetch data from an organization’s internal data.
• Say your organization has both an internal Document Management System, and one or more public websites. These websites often include dynamic data that is managed internally in your organization (e.g, contact info, list of branches/offices, up-coming events, etc). You could have components “connected” to your DMS, and since the data-fetching happens only in build-time, there’s no security risk (for example, using staticQuery in Gatsby websites).

Demo: Sharing and Reusing Widgets with Bit

To demonstrate sharing and reusing React widgets, We’ll create an avatar widget that fetches an image according to the user’s ID (and then displays it).

The backend part will be handled by a serverless function deployed to Firebase.

The widget and the serverless function will be built in the same repository. Both will be published to Bit’s component hub.

Bit is a tool and a component hub that manages the entire process of sharing components between separate projects.

#reactjs #javascript #typescript #react