vikiboss/react-to-image

[WIP] A Node.js server leveraging `Puppeteer` for capturing and returning screenshots of `React` components, with seamless `UnoCSS` integration.

React to Image

[WIP] A Node.js server leveraging Puppeteer for capturing and returning screenshots of React components, with seamless UnoCSS integration.

The Component is looks like this:

interface TestComponentProps {
  name: string
  list: string[]
}

export function TestComponent(props: TestComponentProps) {
  return (
    <div>
      <h1 className="text-3xl text-amber-6">{props.name}</h1>
      <ul>
        {props.list.map((item, index) => (
          <li key={item}>
            Item {index + 1}: {item}
          </li>
        ))}
      </ul>
    </div>
  )
}

Usage

pnpm install && pnpm build && pnpm start
# or use `esno` to run TS directly
pnpm install && pnpm dev

API

POST https://localhost:8080/create

Create a screenshot of a React component.

Request

{
  // The name of the component, in PascalCase
  "component": "TestComponent", 

  // The props to pass to the component
  "props": {
    "name": "hello",
    "list": ["test", "lol"]
  }
}

You can add more components by adding more React Pure Components in src/components.

TODO: Add more endpoints.

Response

An image file.

License

MIT