Package Exports

cheerio-react-bind

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cheerio-react-bind) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

cheerio-react-bind

This React component binds a Cheerio dom to its own dom with custom tags

This is a core component for the action-hub project.

Example/usage:

import ReactDOM from "react-dom";
import React from "react";
import Cheerio from "cheerio";
import CheerioReactBind from "cheerio-react-bind";

// Custom tags
const tags = {
  bigtext: ({ children }) => <h1>{children}</h1>,
  smalltext: ({ children }) => <p>{children}</p>,
  div: ({ children }) => <div>{children}</div>
};

// Load the Cheerio dom
const $ = Cheerio.load(
  `
  <div id="root"></div>
  `,
  { xmlMode: true }
);

// Render with the Cheerio dom
ReactDOM.render(
  <CheerioReactBind $={$} $elem={$("#root").first()} tags={tags} />,
  document.getElementById("container")
);

$("div").append("<bigtext>Very big</bigtext>");
// Nothing changes until we update
$("div").update();
setTimeout(() => {
  $("div").append("<smalltext>Small text one second later</smalltext>");
  $("div").update();
}, 1000);

Better examples in the examples folder

Contributing

Install:

git clone https://github.com/ocboogie/cheerio-react-bind.git cheerio-react-bind
cd cheerio-react-bind
npm install

Create a feature branch
Make some changes
Follow linting rules
Successfully run tests
Create a pull request