Sharing React Widgets Between Apps

Sharing React Widgets Between Apps

How and why you should share React data-fetching components. Widgets are reusable components that handle both logic/data-fetching and presentation.

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to Build Meme Generator with React, React Hooks and TypeScript

The best way to learn something is by doing. It works even better if it means working on something for fun. So, how about learning about React, React hooks and TypeScript by building your own meme generator? This tutorial will show you how to do it.

Build React Components for Codebases that use JavaScript & TypeScript

Learn how to build React components for codebases that use JavaScript and TypeScript. Learn how we can use TypeScript with React and built components that are usable within both TypeScript and JavaScript files.

Create React PWA using TypeScript or JavaScript

Starter React Flux .Create React PWA using TypeScript or JavaScript .Starter-React-Flux enable you to create modern Progressive Web Apps using React and Flux.

Learn React and TypeScript by Building a Meme Generator

In this post, we learning about React, React hooks and TypeScript by building your own meme generator

How to Setup React Router v5 using React Hooks

React Router library makes the navigation experience of the client in your web page application more joyful, but how?! React Router, indeed, prevent the page from being refreshed. Thus the blank page resulted from a refreshed page is not...