https://github.com/measuredco/react-from-html

Convert HTML into React components
https://github.com/measuredco/react-from-html

Last synced: 4 days ago
JSON representation

Convert HTML into React components

• Host: GitHub
• URL: https://github.com/measuredco/react-from-html
• Owner: measuredco
• License: mit
• Created: 2020-09-14T10:09:30.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-11-09T16:19:19.000Z (about 1 year ago)
• Last Synced: 2024-04-29T19:07:46.088Z (7 months ago)
• Language: TypeScript
• Size: 281 KB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-from-html

> Convert HTML into React components

[![NPM](https://img.shields.io/npm/v/react-from-html.svg)](https://www.npmjs.com/package/react-from-html) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-prettier-brightgreen.svg)](https://prettier.io)

## Intro

`react-from-html` allows you to convert _individual_ DOM nodes into React components. This means you can use React components in non-React contexts.

You can go from this:

```html



```


to this:

```jsx

```

## Quick Start

Install

```sh

npm install --save react-from-html

```

Map your selectors to your components

```jsx

import React from "react";

import reactFromHTML from "react-from-html";

// Your component

const ShowMore = ({ content }) => (

  


);


// Can be anywhere on page. You can also have multiple entry points.

const root = document.querySelector("body");

reactFromHTML(root, {

  // Map all `.ShowMore` elements using a hydrator

  ".ShowMore": async el => ,

});

```

## API

### `reactFromHTML(root, hydrators, options)`

Params:

- **root**: Element - Root element containing your components

- **hydrators**: Object - mapping functions

  - **key**: String - The query selector for the component

  - **value**: Func - A **Hydrator Function**, describing how to map this element to a React component (see below).

- **Options**: Object

  - **extra**: Object - additional properties passed to each hydrator

  - **getQuerySelector**: (key:String): String - a function for defining custom query selectors for each key

### `hydrator(el, hydrate, extra): ReactNode`

Defined by you for each component you want to convert back into React. It maps an `Element` into a `ReactNode`.

- **el**: Element - the element for this component, as defined by the query selector

- **hydrate(el)**: Func - a convenience, prebaked version of `reactFromHTML` used for hydrating child nodes. For example, converting `innerHTML` into React children.

- **extra**: Object - additional params as defined in the initial `reactFromHTML()` call.

## Examples

### Basic hydration

This example shows hydration of a basic component, with the single prop `content` that is assigned to a data attribute.

#### React

```jsx

const ShowMore = ({ content }) => (

  


);


// 

```

#### HTML

```html

  


```

#### Hydration

```jsx

reactFromHTML(document.querySelector("body"), {

  ".ShowMore": async el => ,

});

```

### Advanced hydration

This example shows hydration of a more complex component, with multiple props, and children which may themselves need hydrating.

#### React

```jsx

const Modal = ({ children }) => (

  


    
{title}

    
{children}

  

);


const ShowMore = ({ content }) => (

  


);


// 

//   

// 

```

#### HTML

```html

  


    
My Modal

    


      


    

  


```

#### Hydration

```jsx

const ModalHydrator = async (el, hydrate) => (

  

    {await hydrate(el.querySelector(".Modal-inner"))}

  

);

const ShowMoreHydrator = async el => ;

reactFromHTML(document.querySelector("body"), {

  ".Modal": ModalHydrator,

  ".ShowMore": ShowMoreHydrator,

});

```

## Acknowledgement

This package is based on the excellent [react-from-markup](https://github.com/simon360/react-from-markup) from [Simon Andrews](https://github.com/simon360).

## LICENSE

MIT © [Measured Corporation Ltd](https://github.com/measuredco)