jsx-to-string
v1.4.0
Parse your React JSX component to string
15.6K/weekUpdated 3 years agoMITUnpacked: 82.5 KB
Published by alansouzati
npm install jsx-to-stringjsx-to-string
Parse your React JSX components to string
$3
``sh`
npm install jsx-to-string
$3
`js
import React from 'react';
import jsxToString from 'jsx-to-string';
// or var jsxToString = require('jsx-to-string');
let Basic = React.createClass({
render() {
return (
);
}
}); //this is your react component
console.log(jsxToString(
`
$3
1. The default value for function is .... Use keyValueOverride for custom key values.
$3
* useFunctionCode (boolean)
Optional. Defaults to false. Whether or not to use the function actual source code instead of ...
For example:
`js
import React from 'react';
import jsxToString from 'jsx-to-string';
//or var jsxToString = require('jsx-to-string');
let Basic = React.createClass({
render() {
return (
);
}
}); //this is your react component
let _onClickHandler = function () {
//no-op
}
console.log(jsxToString(
useFunctionCode: true
})); //outputs:
`
* functionNameOnly (boolean)
Optional. Defaults to false. Whether prop function values should contain only the name.
This flag will only be used if useFunctionCode is set to true.
For example:
`js
import React from 'react';
import jsxToString from 'jsx-to-string';
//or var jsxToString = require('jsx-to-string');
let Basic = React.createClass({
render() {
return (
);
}
}); //this is your react component
let _onClickHandler = function () {
//no-op
}
console.log(jsxToString(
functionNameOnly: true,
useFunctionCode: true
})); //outputs:
`
* keyValueOverride (object)
A key-value map that overrides the value of any React props with exact match with the given key. For example:
`js
import React from 'react';
import jsxToString from 'jsx-to-string';
//or var jsxToString = require('jsx-to-string');
let Basic = React.createClass({
render() {
return (
);
}
}); //this is your react component
let _onClickHandler = function () {
//no-op
}
console.log(jsxToString(
keyValueOverride: {
onClick: '_onClickHandler'
}
})); //outputs:
`
* ignoreProps (array)
An array of string keys that should be ignored from the JSX string. For example:
`js
import React from 'react';
import jsxToString from 'jsx-to-string';
//or var jsxToString = require('jsx-to-string');
let Basic = React.createClass({
render() {
return (
);
}
}); //this is your react component
console.log(jsxToString(
ignoreProps: ['test1']
})); //outputs:
`
* ignoreTags (array)
An array of string tags that should be ignored from the JSX string. For example:
`js
import React from 'react';
import jsxToString from 'jsx-to-string';
//or var jsxToString = require('jsx-to-string');
let Basic = React.createClass({
render() {
return (
);
}
}); //this is your react component
console.log(jsxToString( I am alone I am alone
ignoreTags: ['svg', 'img']
})); //outputs:
`
* shortBooleanSyntax (boolean)
Optional. Defaults to false. Whether or not to show the short or long boolean syntax.
`js
import React from 'react';
import jsxToString from 'jsx-to-string';
//or var jsxToString = require('jsx-to-string');
let Basic = React.createClass({
render() {
return (
);
}
}); //this is your react component
console.log(jsxToString(
shortBooleanSyntax: true,
})); //outputs:
`
* displayName (string)
A custom value to be used as the component name. For example:
`js
import React from 'react';
import jsxToString from 'jsx-to-string';
//or var jsxToString = require('jsx-to-string');
let Basic = React.createClass({
render() {
return (
);
}
}); //this is your react component
console.log(jsxToString(
displayName: 'CustomName'
})); //outputs:
``