reacterminator
Advanced tools
Reacterminator converts html into es6 react components.
To get started, annotate your html tags with several simple data attributes that reacterminator recognizes.
For example, you can add a data-component-name attribute to your html to let
reacterminator know that it is a react component:
// file: example.html
<body>
<div data-component-name="Unicorn"></div>
</body>
Then let reacterminator do the work:
$ reacterminator convert example.html
A file named 'Unicorn.jsx' will be generated at './components/Unicorn.jsx' with the following content:
import React from 'react';
export default class Unicorn extends React.Component {
render() {
return (
<div/>
);
}
}
Please check the kitchen sink test for a comprehensive example of what reacterminator is capable of.
npm i -g reacterminator
You can use reacterminator or rt for short.
Usage: reacterminator [options] [command]
Commands:
convert|c <path> convert html files into react component files.
generate|g <path> generate custom files.
help [cmd] display help for [cmd]
Convert html files to react components
Options:
-h, --help output usage information
-V, --version output the version number
Examples:
$ reacterminator c design.html
$ reacterminator c design/
$ reacterminator g components/MyCustom
Notes:
If the input is a folder, files ending with -ignore.html will be ignored.
/**
* convert html to react components
*
* @param {Object} input
* {('path'|'string')} input.type
* {string} input.content
* When input.type is 'string', input.content is the html content.
* When input.type is 'path', input.content specifies the path.
* The path can be a directory or a file.
*
* @param {Object} options
* {boolean} [options.generateFiles=false]
* {string} [options.outputPath='./components']
* {boolean} [options.recursive=false]
* When options.recursive is true, reacterminator will find .html files recursivly
* and convert them into react components.
* When false, reacterminator will only find the .html files
* in the current directory.
**/
var reacterminator = require('reacterminator');
var components = reacterminator(
{
type: 'string',
content: '<div data-component-name="Unicorn""></div>'
},
{
generatefiles: false,
}
);
console.log(components.Unicorn.formattedFileSnippet)
// import React from 'react';
//
// export default class Unicorn extends React.Component {
// render() {
// return (
// <div/>
// );
// }
// }
npm run test:watch:mocha )npm test )
nvm install # .nvmrc is used to specify node version
nvm use
npm run test
// Coverall will give you an error since your local is not a travis-ci environment.
// That is OK.
FAQs
Convert html files to react components
The npm package reacterminator receives a total of 0 weekly downloads. As such, reacterminator popularity was classified as not popular.
We found that reacterminator demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.