# cheerio-react-bind

> Binds a Cheerio dom to its reacts dom with custom tags

Latest version **1.2.0** (published 2018-01-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install cheerio-react-bind
pnpm add cheerio-react-bind
yarn add cheerio-react-bind
bun add cheerio-react-bind
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2018-01-30 |
| First published | 2017-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Eamon mikulec |
| Maintainers | ocboogie |
| Keywords | react, cheerio, bind, binding, dom, virtual-dom |

## Links

- npm: https://www.npmjs.com/package/cheerio-react-bind
- Repository: https://github.com/ocboogie/cheerio-react-bind
- npm.io page: https://npm.io/package/cheerio-react-bind

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.2.0
- [cheerio](https://npm.io/package/cheerio.md) ^1.0.0-rc.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2018-01-30
- 1.1.3 — 2018-01-27
- 1.1.2 — 2018-01-18
- 1.1.1 — 2018-01-18
- 1.0.1 — 2018-01-18
- 1.0.0 — 2017-12-29
- 0.2.0 — 2017-12-27
- 0.1.6 — 2017-11-15
- 0.1.5 — 2017-11-15
- 0.1.4 — 2017-11-08
- 0.1.3 — 2017-11-08
- 0.1.2 — 2017-11-08
- 0.1.1 — 2017-11-08
- 0.1.0 — 2017-11-08

## 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](https://github.com/ocboogie/action-hub) project.

## Example/usage:

```js
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

1. Install:

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

2. Create a feature branch
3. Make some changes
4. Follow linting rules
5. Successfully run tests
6. Create a pull request

---
_Source: https://npm.io/package/cheerio-react-bind · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._