react-rehydrate

Declare your React components with static HTML

React is a powerful JavaScript library for building user interfaces, but integrating it into non-JavaScript environments can be challenging. Whether you're working with legacy systems, content management systems (CMS), or templating engines that don't natively support JavaScript, react-rehydrate bridges the gap.

It allows you to declare React components directly in your static HTML using simple data attributes, enabling progressive enhancement without rewriting your entire frontend architecture.

react-rehydrate is intended to make it possible to use React components on these legacy systems, without changing the way you write your React components. It provides tools to simplify the mapping from data- attributes into React props, and can even handle React children.

Installation

npm install @sivaraj-v/react-rehydrate @sivaraj-v/dom-element-to-react

or

yarn add @sivaraj-v/react-rehydrate @sivaraj-v/dom-element-to-react

Quick Start

1. Define your React component:

import React from 'react';

const HelloUser = ({ userName }) => (
  <h2>Hello, {userName}!</h2>
);

export default HelloUser;

2. Create a rehydrator function:

const helloUserRehydrator = async (domNode, rehydrateChildren, extra) => {
  const userName = extra.userName; // Passed via options
  return <HelloUser userName={userName} />;
};

3. Add markup to your HTML:

<div data-react-from-markup-container>
  <h2 data-rehydratable="HelloUser">Hello, !</h2>
</div>

4. Rehydrate on page load:

import rehydrate from '@sivaraj-v/react-rehydrate';

const rehydrators = {
  HelloUser: helloUserRehydrator,
};

rehydrate(document.body, rehydrators, {
  extra: { userName: 'World' },
});

API Reference

rehydrate(container, rehydrators, options)

Rehydrates all elements with data-react-from-markup-container within the given container.

• container: The DOM element to search for containers in.
• rehydrators: An object mapping rehydrator names to functions.
• options: Configuration object with extra property for passing data to rehydrators.

Rehydrator Function

A rehydrator function has the signature:

async (domNode, rehydrateChildren, extra) => ReactElement

• domNode: The DOM element being rehydrated.
• rehydrateChildren: Function to rehydrate child elements.
• extra: Extra data passed from options.

rehydrateChildren(node, rehydrators, options)

Rehydrates the children of a DOM node.

Examples

See the examples directory for complete working examples:

• Static - Basic static rehydration
• Hello User - Passing props via options
• Show More - Interactive component with children
• Show More Text - Reading data from attributes
• Asynchronous - Async rehydration

To run examples:

cd examples
yarn install
yarn dev

Building

yarn install
yarn compile

Testing

yarn test

License

MIT

Credits

Respecting the original work, react-rehydrate is a maintained fork of react-from-markup by Simon Andrews, updated for modern React versions.

Note: The original simon360/react-from-markup repository is archived and no longer maintained. The author chose not to transfer maintenance, citing supply chain security concerns (see PR #50 and Microsoft's analysis of npm supply chain attacks), and I respect that prudent decision. Out of respect for the original author, I retain the data-react-from-markup-container attribute name without modification.