Jsx Preview

Renders JSX strings as React components. It processes and completes JSX tags automatically. Use it to display JSX content dynamically. It supports streaming content for real-time updates.

byJulien Thibeaut from Prompt Kit

Installation

terminal

pnpm dlx layro-cli add @ibelick/jsx-preview

npx layro-cli add @ibelick/jsx-preview

npx layro-cli add @ibelick/jsx-preview

bunx layro-cli add @ibelick/jsx-preview

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import * as React from "react"
import JsxParser from "react-jsx-parser"
import type { TProps as JsxParserProps } from "react-jsx-parser"

function matchJsxTag(code: string) {
  if (code.trim() === "") {
    return null
  }

  const tagRegex = /<\/?([a-zA-Z][a-zA-Z0-9]*)\s*([^>]*?)(\/)?>/
  const match = code.match(tagRegex)

  if (!match || typeof match.index === "undefined") {
    return null