React micro-frontend framework allowing you to host multiple React components from HTML.
React Abode is an innovative framework designed for creating micro-frontends using React. It allows developers to effortlessly host multiple React components in a single HTML page, making it easier to manage complex applications by breaking them down into smaller, reusable parts. The simplicity of passing props and handling dynamic updates makes React Abode an appealing choice for those looking to enhance their React projects with a micro-frontend architecture.
With its automatic DOM node detection and rerendering capabilities, React Abode streamlines the integration process for React components. This framework not only facilitates efficient component management but also supports custom prop parsing and utility functions, making it a versatile tool for modern web development.
Prop Passing: Effortlessly pass props to your components using a data-prop-prop-name attribute, automatically converting kebab-case props to camelCase.
Script Props: Enable the consumption of data-prop- attributes inside your scripts through getScriptProps(), ensuring that all necessary data is accessible throughout your component hierarchy.
Custom Prop Parsing: Utilize JSON.parse by default for prop values, with the option to implement custom parsing functions for unique requirements.
Automatic DOM Node Detection: Enjoy seamless integration, as React Abode automatically detects and populates newly added DOM nodes with registered React components.
Update on Prop Change: Benefit from real-time updates; changes to component props will trigger rerenders, making it easier to manage nested frameworks.
Flexible Component Selector: Change the default data-component selector using the setComponentSelector function to fit your project’s naming conventions.
Active Component Management: Use getActiveComponents to retrieve a list of currently rendered Abode elements and getRegisteredComponents to access all registered components, enhancing your application’s manageability.
Populate Function Options: Customize how components are populated with the populate function, allowing for class name attributes and callback functions for batch updates.
