# react-imagify

> A small React component to render HTML as Canvas.

Latest version **0.4.0** (published 2023-08-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-imagify
pnpm add react-imagify
yarn add react-imagify
bun add react-imagify
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2023-08-10 |
| First published | 2021-05-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 35.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | inokawa |
| Maintainers | inokawa |
| Keywords | react, canvas, webgl |

## Links

- npm: https://www.npmjs.com/package/react-imagify
- Repository: https://github.com/inokawa/react-imagify
- Homepage: https://github.com/inokawa/react-imagify#readme
- Issues: https://github.com/inokawa/react-imagify/issues
- npm.io page: https://npm.io/package/react-imagify

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2023-08-10
- 0.3.0 — 2022-02-16
- 0.2.0 — 2021-11-07
- 0.1.0 — 2021-05-15
- 0.0.0 — 2021-05-09

## README

# react-imagify

![npm](https://img.shields.io/npm/v/react-imagify) [![check](https://github.com/inokawa/react-imagify/actions/workflows/check.yml/badge.svg)](https://github.com/inokawa/react-imagify/actions/workflows/check.yml) [![demo](https://github.com/inokawa/react-imagify/actions/workflows/demo.yml/badge.svg)](https://github.com/inokawa/react-imagify/actions/workflows/demo.yml)

A small [React](https://github.com/facebook/react) component to render HTML as Canvas.

## Why?

Drawing HTML on Canvas is useful to apply some effect through Canvas and easy to save as image.

This component renders usual JSX on Canvas without any context switch, and does not require any heavy dependencies like three.js.

## Demo

https://inokawa.github.io/react-imagify/

## Install

```sh
npm install react-imagify
```

### Requirements

- react >= 16.14

## Usage

```jsx
import { useRef, useEffect } from "react";
import { Imagify } from "react-imagify";

export const Component = () => {
  const ref = useRef(null);
  useEffect(() => {
    // do something
    const canvasElement = ref.current;
  }, []);

  return (
    <div>
      <Imagify ref={ref} width={400} height={100}>
        <div style={{ fontSize: "40px" }}>
          <em>I</em> like{" "}
          <span style={{ color: "white", textShadow: "0 0 2px blue" }}>
            cheese
          </span>
        </div>
      </Imagify>
    </div>
  );
};
```

## Limitations

This lib uses [foreignObject](https://developer.mozilla.org/docs/Web/SVG/Element/foreignObject) to draw HTML inside Canvas, so how they would be rendered depends on browsers' implementation.

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