React Element to JSX String

import reactElementToJSXString from "react-element-to-jsx-string";

import reactElementToJSXString, { inlineFunction, preserveFunctionLineBreak } from "react-element-to-jsx-string";

const reactElementToJSXString = require("react-element-to-jsx-string");
const { inlineFunction, preserveFunctionLineBreak } = require("react-element-to-jsx-string");

import React from 'react';
import reactElementToJSXString from 'react-element-to-jsx-string';

const element = <div a="1" b="2">Hello, world!</div>;
console.log(reactElementToJSXString(element));
// Output:
// <div
//   a="1"
//   b="2"
// >
//   Hello, world!
// </div>

// With options
const options = {
  showDefaultProps: false,
  tabStop: 4,
  useBooleanShorthandSyntax: false
};
console.log(reactElementToJSXString(element, options));

/**
 * Convert a React element to JSX string
 * @param element - The React element to convert
 * @param options - Configuration options for JSX string generation
 * @returns JSX string representation
 */
function reactElementToJSXString(
  element: ReactNode, 
  options?: ReactElementToJSXStringOptions
): string;

interface ReactElementToJSXStringOptions {
  /** Custom function to determine element display names */
  displayName?: (element: ReactNode) => string;
  /** Filter props by name array or custom function */
  filterProps?: string[] | FilterPropsFunction;
  /** Show default props in output (default: true) */
  showDefaultProps?: boolean;
  /** Show function bodies instead of placeholder (default: false) */
  showFunctions?: boolean;
  /** Custom function value formatter */
  functionValue?: (fn: any) => any;
  /** Number of spaces for indentation (default: 2) */
  tabStop?: number;
  /** Use boolean shorthand syntax like `enabled` instead of `enabled={true}` (default: true) */
  useBooleanShorthandSyntax?: boolean;
  /** Maximum characters per line for inline attributes */
  maxInlineAttributesLineLength?: number;
  /** Sort props alphabetically (default: true) */
  sortProps?: boolean;
  /** Use fragment short syntax `<>...</>` when possible (default: true) */
  useFragmentShortSyntax?: boolean;
}

type FilterPropsFunction = (value: any, key: string) => boolean;

import React from 'react';
import reactElementToJSXString from 'react-element-to-jsx-string';

// Basic conversion
const basicElement = <button onClick={() => console.log('clicked')}>Click me</button>;
console.log(reactElementToJSXString(basicElement));

// With nested elements
const nestedElement = (
  <div className="container">
    <h1>Title</h1>
    <p>Some text with <strong>bold</strong> content</p>
  </div>
);
console.log(reactElementToJSXString(nestedElement));

// With custom options
const customElement = <input type="text" required disabled={false} />;
const customOptions = {
  useBooleanShorthandSyntax: false,
  showDefaultProps: false,
  tabStop: 4
};
console.log(reactElementToJSXString(customElement, customOptions));

// Filtering props
const elementWithManyProps = <div id="test" className="example" data-testid="my-div" key="unique">Content</div>;
const filteredOptions = {
  filterProps: ['data-testid', 'key'] // Remove these props from output
};
console.log(reactElementToJSXString(elementWithManyProps, filteredOptions));

// Custom function filtering
const functionFilterOptions = {
  filterProps: (value, key) => !key.startsWith('data-') // Remove all data- attributes
};
console.log(reactElementToJSXString(elementWithManyProps, functionFilterOptions));

/**
 * Format function as inline string (removes line breaks)
 * @param fn - Function to format
 * @returns Inline string representation
 */
function inlineFunction(fn: any): string;

/**
 * Format function preserving original line breaks
 * @param fn - Function to format  
 * @returns String representation with line breaks preserved
 */
function preserveFunctionLineBreak(fn: any): string;

import reactElementToJSXString, { inlineFunction, preserveFunctionLineBreak } from 'react-element-to-jsx-string';

// Using custom function formatters
const multilineFunction = function handleClick(event) {
  event.preventDefault();
  console.log('Button clicked');
};

const element = <button onClick={multilineFunction}>Click me</button>;

// Default behavior (inline function placeholder)
console.log(reactElementToJSXString(element));
// Output: <button onClick={function noRefCheck() {}}>Click me</button>

// Show actual function bodies inline
console.log(reactElementToJSXString(element, {
  showFunctions: true,
  functionValue: inlineFunction
}));
// Output: <button onClick={function handleClick(event) { event.preventDefault(); console.log('Button clicked'); }}>Click me</button>

// Preserve function line breaks
console.log(reactElementToJSXString(element, {
  showFunctions: true,
  functionValue: preserveFunctionLineBreak
}));
// Output: function with original formatting preserved

const CustomComponent = () => <div>Custom</div>;
const element = <CustomComponent />;

const options = {
  displayName: (element) => {
    if (element.type.name === 'CustomComponent') {
      return 'MyCustomComponent';
    }
    return element.type.displayName || element.type.name || 'Unknown';
  }
};

console.log(reactElementToJSXString(element, options));
// Output: <MyCustomComponent />

const element = <input type="text" placeholder="Enter text" className="form-control" required />;

// Inline short attributes
const inlineOptions = {
  maxInlineAttributesLineLength: 60
};
console.log(reactElementToJSXString(element, inlineOptions));
// Output: <input type="text" placeholder="Enter text" className="form-control" required />

// Force multiline attributes
const multilineOptions = {
  maxInlineAttributesLineLength: 20
};
console.log(reactElementToJSXString(element, multilineOptions));
// Output:
// <input
//   type="text"
//   placeholder="Enter text"
//   className="form-control"
//   required
// />

import React, { Fragment } from 'react';

// Fragment with short syntax
const shortFragment = (
  <>
    <div>First</div>
    <div>Second</div>
  </>
);

console.log(reactElementToJSXString(shortFragment));
// Output:
// <>
//   <div>First</div>
//   <div>Second</div>
// </>

// Force explicit Fragment syntax
const explicitOptions = {
  useFragmentShortSyntax: false
};
console.log(reactElementToJSXString(shortFragment, explicitOptions));
// Output:
// <React.Fragment>
//   <div>First</div>
//   <div>Second</div>
// </React.Fragment>

// Keyed fragments always use explicit syntax
const keyedFragment = (
  <Fragment key="my-fragment">
    <div>Content</div>
  </Fragment>
);
console.log(reactElementToJSXString(keyedFragment));
// Output:
// <React.Fragment key="my-fragment">
//   <div>Content</div>
// </React.Fragment>

interface ReactElementToJSXStringOptions {
  displayName?: (element: ReactNode) => string;
  filterProps?: string[] | FilterPropsFunction;
  showDefaultProps?: boolean;
  showFunctions?: boolean;  
  functionValue?: (fn: any) => any;
  tabStop?: number;
  useBooleanShorthandSyntax?: boolean;
  maxInlineAttributesLineLength?: number;
  sortProps?: boolean;
  useFragmentShortSyntax?: boolean;
}

type FilterPropsFunction = (value: any, key: string) => boolean;

// Throws: "react-element-to-jsx-string: Expected a ReactElement"
reactElementToJSXString(null);
reactElementToJSXString(undefined);

// Throws: "react-element-to-jsx-string: Expected a React.Element, got `object`"  
reactElementToJSXString({});
reactElementToJSXString([]);