search

poetic / reacterminator

Convert html to react components in es6 syntax.
56 stars 6 forks source link

readme

reacterminator

travis npm semantic-release coverall

Node >= 6.0.0

Usage

How to use reacterminator?

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.

DATA ATTRIBUTES

REDUX INTEGRATION

CLI

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.

NODE

/**
 * 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/>
//       );
//   }
// }

Alternatives

Development

Workflow

Setup

Resouces