How do I pass event handlers to Remount components?

Event handlers must be passed as props via JSON attributes, but they need to be serializable functions. For complex interactions, consider using custom events or a global event bus, as Remount's attribute-based system is limiting.

Remount vs React Web Components: which is better?

Remount simplifies the process with a lightweight API and fallbacks, while building React web components from scratch offers more control. Choose Remount for quick integration; opt for custom implementations if you need fine-grained customization.

Can Remount work with TypeScript?

Yes, but prop types require manual definition since attributes are strings. Use interfaces or type assertions to ensure type safety, but it's less seamless than native React prop typing.

Is Remount good for production use?

Yes, for small to medium integrations, thanks to its stability and browser support. However, test thoroughly for complex prop passing and state management, as the attribute-based approach can introduce bugs.

How to debug Remount components in the browser?

Use browser dev tools to inspect custom elements and check attribute values. Since Remount mounts React components, React Developer Tools can help, but debugging prop serialization issues might require logging.

Does Remount support server-side rendering?

No, Remount is client-side only. For SSR, you need to render React components separately on the server and hydrate them, which Remount doesn't handle, making it unsuitable for SEO-critical pages without extra setup.

Open-Awesome

remount

MITJavaScriptv1.0.0

Mount React components as custom elements to use them anywhere in HTML, including non-SPA apps and other frameworks.

GitHub

720 stars23 forks0 contributors

What is remount?

Remount is a JavaScript library that allows React components to be mounted as custom elements (web components) in the DOM. It solves the problem of integrating React into non-single-page applications (SPAs) or enabling interoperability with other frameworks by treating React components as standard HTML elements.

Target Audience

Developers working on multi-framework projects, legacy applications, or server-rendered sites (e.g., Rails, Phoenix) who need to incrementally adopt React without rewriting their entire stack.

Value Proposition

Remount offers a dependency-free, lightweight solution (2kb gzipped) that bridges React with the native web component ecosystem, providing broad browser support and simple integration compared to more complex alternatives.

Overview

Mount React components to the DOM using custom elements

Use Cases

Best For

Adding React components to server-rendered Rails or Phoenix applications
Embedding React functionality within Vue or Angular projects
Gradually migrating legacy HTML sites to React without a full SPA rewrite
Creating reusable UI components that work across different JavaScript frameworks
Building micro-frontends with React in a polyglot frontend architecture
Enhancing static HTML pages with interactive React elements

Not Ideal For

Projects building fully-featured React single-page applications where custom elements add unnecessary abstraction
Applications requiring complex, real-time state synchronization across components using React's context or Redux
Teams needing server-side rendering of React components without client-side JavaScript, as Remount requires client-side mounting

Pros & Cons

Pros

Tiny Footprint

At 2kb gzipped with no dependencies, Remount adds minimal load to your application, as highlighted in the README's bundle size badge.

Universal Browser Support

Supports all browsers that React 18 supports, including IE via fallbacks, ensuring broad compatibility without polyfills.

Framework Interoperability

Enables React components to work alongside Vue, Angular, or any DOM library by defining them as custom elements, perfect for multi-framework projects as shown in the use cases.

Simple Legacy Integration

Provides an easy define() API to add React to server-rendered pages in frameworks like Rails or Phoenix with minimal code, ideal for gradual adoption.

Cons

Clunky Prop Management

Passing props through JSON attributes or named attributes can be verbose and error-prone for complex data, limiting scalability and developer experience.

React 18 Dependency

Requires React 18, which may force upgrades in projects using older React versions, adding migration overhead and compatibility risks.

Limited Advanced Features

Lacks built-in support for React's modern patterns like suspense or concurrent rendering, requiring additional work for optimal performance.

Frequently Asked Questions

Related Projects

react-shadow

:beginner: Utilise Shadow DOM in React with all the benefits of style encapsulation.

Stars1,381

Forks83

Last commit1 year ago

preact-custom-element

Wrap your component up as a custom element

Stars402

Forks54

Last commit3 months ago

reactify-wc

Use Web Components with React

Stars178

Forks10

Last commit3 years ago

@adobe/react-webcomponent

This projects automates the wrapping of a React component in a CustomElement.

Stars104

Forks20

Last commit2 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub