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

A small React component to render HTML as Canvas.
https://github.com/inokawa/react-imagify

Last synced: 6 months ago
JSON representation

A small React component to render HTML as Canvas.

• Host: GitHub
• URL: https://github.com/inokawa/react-imagify
• Owner: inokawa
• License: mit
• Created: 2021-05-09T06:40:07.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-12-15T14:49:07.000Z (almost 2 years ago)
• Last Synced: 2025-03-12T22:51:13.818Z (7 months ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-imagify
• Size: 3.78 MB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-imagify

![npm](https://img.shields.io/npm/v/react-imagify) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/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 (

    


      

        


          I like{" "}

          

            cheese

          

        

      

    

  );

};

```


## 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.