jsx2jpg

⚛️ jsx2jpg 🖼️

A tool for taking screenshots of JSX component files.

Quick Start

Install the library:

$ npm install -g jsx2jpg

Install its peer dependencies:

$ npm install -g react react-dom react-helmet

Use the library:

$ jsx2jpg snap App.jsx

See Examples below for more.

CLI Reference

Snap

The snap command (currently the only command in this library takes a screenshot of a React component).

Show help message:

$ jsx2jpg snap --help

Calling format and available options:

jsx2jpg snap <component> [context]

Takes a screenshot of a component.

Positionals:
  component   A path to a JSX file.                          [string] [required]
  context, c  A path to an importable data file.                        [string]

Options:
  --version           Show version number                              [boolean]

  --help              Show help                                        [boolean]

  --size, -s          A sizing string for width/height
                                                   [string] [default: "600x325"]

  --destination, -o   The destination directory          [string] [default: pwd]

  --quality, -q       The quality (from 0 to 100)        [number] [default: 100]

  --resolution, -r    A resolution multiplier              [number] [default: 1]

  --fileAccessor, -a  Accessor for filename if multiple contexts
                                                        [string] [default: "id"]

  --filename, -n      Name of file if single context
                                                 [string] [default: "share.jpg"]

  --verbose, -v       Whether to log updates in the console
                                                       [boolean] [default: true]

  --cleanup, --cu     Whether to delete the .tmp directory
                                                       [boolean] [default: true]

Examples

• Hello World
• Hello Options
• Hello Styles
• Hello Data
  • Hello Programmatic Data
  • Hello Asynchronous Data