Converts HTML pages into React components

Last update: May 8, 2022

Logo

Extract annotated portions of HTML into React components as separate modules. The structure of HTML is preserved by importing child components and replacing appropriate pieces of HTML with them. As a result you get an entire components tree ready to be rendered.

Try in online REPL

usage example animation

Contents

When to use it

This utility was designed to free React developers from a boring task of translating HTML into components.

Imagine you just got a pile of HTML from your designers. The first thing you will do is break HTML into React components. This is boring and should be automated!

Installation

$ npm i -g html-to-react-components

Usage

HTML element with data-component attribute will be converted into separate React components. The value of the attribute is the name of the React component.

Additionally specify which HTML attributes should be exposed as React props using public: prefix.

<input public:type="text" id="input" data-component="Input" />
// at usage place
<Input type="text" />;
// ----^^^^^^^^^^^

// in component's module
class Input extends React.Component {
  render() {
    const { type } = this.props; // <----
    return <input type={type} id="input" />;
    // -----------^^^^^^^^^^^
  }
}

See and run test.js file for usage example and output.

CLI

$ html2react "./src/*.html"

You can also use any glob pattern to recursively generate the corresponding react file. Just make sure to use double quotes when specifying the pattern:

$ html2react "./src/**/*.html"

Options

componentType, --component, -c

Type of generated React components.

Values:

  • stateless
  • es5
  • es6 (default)

moduleType, --module, -m

Type of generated JavaScript modules.

Values:

  • es6 (default)
  • cjs (CommonJS)

moduleFileNameDelimiter, --delimiter, -d

Delimiter character to be used in modules filename.

If you don't specify a delimiter, or pass -d without a value, then the component name in the HTML will be used unchanged as the filename. If you do specify a delimiter character, then the module name is broken into words, joined with the delimiter and lower-cased.

output

Configuration options for output to file system.

path, --out, -o

Output directory path.

Default is components directory in the current directory.

fileExtension, --ext, -e

Output files extension.

Default value is js.

Node.js API

const extractReactComponents = require("html-to-react-components");

extractReactComponents(
  `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <header class="header" data-component="Header">

    <h1 class="heading" data-component="Heading">Hello, world!</h1>

    <nav class="nav" data-component="Nav">
      <ul class="list">
        <li class="list-item" data-component="ListItem">#1</li>
        <li class="list-item" data-component="ListItem">#2</li>
      </ul>
    </nav>

  </header>

</body>
</html>
`,
  {
    componentType: "stateless",
    moduleType: false
  }
);

/*
{ Header: 'const Header = () => <header className="header">\n\n    <Heading></Heading>\n\n    <Nav></Nav>\n\n  </header>;',
  Heading: 'const Heading = () => <h1 className="heading">Hello, world!</h1>;',
  Nav: 'const Nav = () => <nav className="nav">\n      <ul className="list">\n        <ListItem></ListItem>\n        <ListItem></ListItem>\n      </ul>\n    </nav>;',
  ListItem: 'const ListItem = () => <li className="list-item">#2</li>;' }
*/

Building for browser

When building for in-browser usage an env variable IN_BROWSER is required to be set at compile time in order to disable Node.js-specific modules. Note that code formatting is not included in in-browser bundle.

Example of defining a var in Webpack config:

  plugins: [
    new webpack.DefinePlugin({
      IN_BROWSER: JSON.stringify(true),
    }),
  ],

Resources

A quick video demo on converting a simple HTML page into React components and rendering them into the same looking UI.

Annotating HTML in the editor is not the best experience, because you cannot see rendered UI itself. It's possible to annotate HTML using DevTools. Be aware that you'll have to spend time on copying and pasting markup from DevTools into files which will be processed.

usage example with DevTools animation

Ecosystem

  • extract-to-react is an extension for Chrome and Chromium browsers built on top of html-to-react-components which allows you to extract HTML and CSS into React components and load them in CodePen or JSFiddle.

Contributing

If you spotted a bug, please, submit a pull request with a bug fix. If you would like to add a feature or change existing behaviour, open an issue and tell about what exactly you want to change/add.

License

MIT

GitHub

https://github.com/roman01la/html-to-react-components
Comments
  • 1. Build Error: API Usage in browser build

    Get a slew of errors when attempting to import the npm package.

    Won't post the whole thing but the first line is: ERROR in C:/nvm/v8.9.4/node_modules/html-to-react-components/node_modules/htmltojsx/src/htmltojsx.js

    Installed the pkg globally as instructed. Linked local node_modules to global installation. ran npm run build -> lots of errors

    Any guidance you can provide regarding usage of your pkg in js would be very welcome. Example code below ..

    import html2reactjs from 'html-to-react-components'

    htmlPage = 'html page content stuff here';

    html2reactjs( htmlPage, { path: compFolder, fileExtension: 'jsx' } );

    Reviewed by kewilson at 2018-02-08 00:54
  • 2. API Usage: Call with Browserfy in effect returns [object Object]

    Hi @roman01la ,

    So I've implemented all the changes for v1.6 and when I call html2react(html_text_blob) the output is simply [object Object]. I've attached the output that I'm capturing along with trying to generate react components along with the code of the plugin that generates the zip contents.

    Any guidance you could provide would be great and much appreciated.

    grapesjs_reactjs_components_1518209170035.zip

    `import grapesjs from "grapesjs"; import JSZip from "jszip"; import FileSaver from "file-saver"; import html2reactjs from "html-to-react-components";

    export default grapesjs.plugins.add( "reactjs-component-builder", (editor, opts = {}) => { const options = { ...{ // default options }, ...opts };

      let c = opts || {};
    let config = editor.getConfig();
    let stylePrefix = config.stylePrefix;
    let button = document.createElement("BUTTON");
    let cmd = "gjs-export-reactjs";
    let defaults = {
      addReactJsButton: 1,
      ReactJsButtonLabel: "Export ReactJS",
      preHtml: '<!doctype html><html lang="en"><head><meta charset="utf-8"><link rel="stylesheet" href="./css/style.css"></head><body>',
      postHtml: "</body><html>",
      preCss: "",
      postCss: ""
    };
    
    for (let name in defaults) {
      if (!(name in c)) {
        c[name] = defaults[name];
      }
    }
    
    button.innerHTML = c.ReactJsButtonLabel;
    button.className = stylePrefix + "btn-prim";
    button.style.paddingLeft = "30px";
    
    // Add command
    editor.Commands.add(cmd, {
      run() {
    
        alert("Starting Generation of ReactJS Components");
    
        let fileNamePrefix = "grapesjs_reactjs_components_";
        let fileExtension = ".zip";
        let htmlFileName = "reactjs_index.html";
        let cssFileName = "reactjs_style.css";
        let jsxFileName = "reactjs_components.jsx";
    
        alert("Set Variables");
    
        let zip = new JSZip();
        let htmlDir = zip.folder("html");
        let cssDir = zip.folder("css");
        let componentsDir = zip.folder("components");
    
        alert("Setup Zip Structure");
    
        let fn = fileNamePrefix + Date.now() + fileExtension;
        let htmlPage = c.preHtml + editor.getHtml() + c.postHtml;
        let htmlStyle = c.preCss + editor.getCss() + c.postCss;
    
        alert("HTML: " + htmlPage);
        alert("CSS: " + htmlStyle);
    
        htmlDir.file(htmlFileName, htmlPage);
        cssDir.file(cssFileName, htmlStyle);
    
        alert("Stored HTML & CSS to Zip");
    
        let out = html2reactjs(htmlPage) + "";
        componentsDir.file(jsxFileName, out);
        
        alert("Generated ReactJS Components: " + out);
    
        zip.generateAsync({ type: "blob" }).then(content => {
          FileSaver.saveAs(content, fn);
        });
    
        alert("ReactJS saved to: " + fn);        
      }
    });
    
    //Add button inside export dialog
    if (c.addReactJsButton) {
      editor.on("run:export-template", () => {
        editor.Modal.getContentEl().appendChild(button);
        button.onclick = () => {
          editor.runCommand(cmd);
        };
      });
    }
    

    } );`

    Reviewed by kewilson at 2018-02-09 21:01
  • 3. Error SyntaxError: Unexpected token

    Hi,

    i'm on Mac and i installed through this command "npm i -g html-to-react-components".

    To take a test I took your index.html present in "example" and run this command in the same path "html2react "./*.html" ".

    It brings me back this error:

    image

    This error happens to me even when I type only the "html2react" command. I did a test on Linux and the same thing happens.

    Reviewed by Richi2293 at 2018-02-09 16:13
  • 4. Support browserify by skipping magic plugin loading

    esformatter's plugin loading depends on a filesystem being present from which it can read the node_modules directory (more here: https://github.com/millermedeiros/esformatter/blob/master/doc/plugins.md).

    Browserify bundles don't have a filesystem, so their dependencies need to be required explicitly.

    Without this fix, browserified bundles are required to understand the inner workings of this module, and also use the following magic incantation with browserify

    browserify -r esformatter-quotes -r esformatter-jsx index.js > out.js

    Reviewed by jesstelford at 2016-01-17 22:24
  • 5. Conditionally exclude FS writing with env var

    Enables smaller browserify builds when combined with envify and uglifyify.

    For example, with an invocation such as:

    browserify -g uglifyify -t [ envify --NO_WRITE_FS ] index.js > out.js
    

    Will conditionally exclude all the write to fs files (including the node fs module which doesn't work in the browser anyway.

    note: The changeset is much better viewed with whitespace differences turned off: https://github.com/roman01la/html-to-react-components/pull/8/files?w=0 (due to indentation of a function)

    Reviewed by jesstelford at 2016-01-20 09:57
  • 6. -bash: html2react: command not found

    Hi .. i got this msg after installing npm i -g html-to-react-components

    its installed but somehow i can't access 'html2react' command

    pls help me .. thx

    Reviewed by radityaruben at 2018-03-24 14:08
  • 7. Inline styling leaves out "px" with line-height conversions

    I have ran the converter a few times and noticed it does not convert 'line-height' accurately. Instead of converting it as with other styling items such as 'width' or 'align' where the value is placed in quotation marks (ex. "35px"), it converts it to number only and leaves out the size value and quotation marks. It does make the conversion to camel case. html2react-texteditorview

    example: Plain html style:

    html-inline-styling

    same file converted using html-to-react-components

    html2react-inline-styling

    Reviewed by mandajoan at 2018-02-16 22:25
  • 8. Plugin error

    Hi,

    I'm facing this issue when running against my index.html

    '''/usr/local/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:4457 throw err; ^

    SyntaxError: Unexpected token (21:59) at Parser.pp$5.raise (/usr/local/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:4454:13) at Parser.pp.unexpected (/usr/local/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:1761:8) at Parser.pp$9.jsxParseIdentifier (/usr/local/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:7029:10) at Parser.pp$9.jsxParseNamespacedName (/usr/local/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:7040:19) at Parser.pp$9.jsxParseAttribute (/usr/local/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:7135:20) at Parser.pp$9.jsxParseOpeningElementAt (/usr/local/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:7147:31) at Parser.pp$9.jsxParseElementAt (/usr/local/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:7169:29) at Parser.pp$9.jsxParseElementAt (/usr/local/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:7182:30) at Parser.pp$9.jsxParseElementAt (/usr/local/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:7182:30) at Parser.pp$9.jsxParseElementAt (/usr/local/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:7182:30)'''

    Reviewed by hecomp at 2017-11-11 20:01
  • 9. Browserify usage instructions

    I've figured out how to get it all running smoothly in the browser, so I've documented it here. If you feel it should go somewhere else, or not even be documented; your call :)

    Thanks for working with me on #6 #7, & #8 to get this running!

    Reviewed by jesstelford at 2016-01-24 20:50
  • 10. Successfully generated 0 components

    Hello,

    I installed the CLI tool and ran it against an HTML file, a directory of HTML files, but it just says...

    image

    I'm on Windows x64 but tried it on my Debian x64 build and got the same result.

    Tried Nodejs 14.15.5 and 15,8.0.

    Reviewed by asheroto at 2021-02-13 17:18
  • 11. Possible to decide data-components automatically?

    First of all, kudos for creating this project! ❤️

    When dealing with a huge template with multiple pages of HTML content with no annotated data-components attribute, would it be possible to automatically decide the components (like, split into very very granular level). I mean, I'd be happier being served LOTs of trivially-small components as the default functionality (ie, when no data-components is specified) rather than ending up with 0 components.

    Am I missing something? Is this feature already existent?

    Reviewed by athityakumar at 2019-06-26 13:43
  • 12. SyntaxError: Unexpected token, expected

    Hello I get this error /usr/local/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:4457 throw err; With the following file (Note it is an HTML file just converted to .log for github purposes.

    topbar.log

    Reviewed by Bowriverstudio at 2022-05-10 14:48
  • 13. SyntaxError: Unexpected token, expected , (3:88)

    Hi I try to use this tool at first time and get this error. What should i do for fixing it?

    html2react ./zectStudioPages/index.html -o ./src/components                                                                                                                                                                                                   
    /home/sherlock/.nvm/versions/node/v13.2.0/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:4633
        throw err;
        ^
    
    SyntaxError: Unexpected token, expected , (3:88)
        at Parser.pp$5.raise (/home/sherlock/.nvm/versions/node/v13.2.0/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:4630:15)
        at Parser.pp.unexpected (/home/sherlock/.nvm/versions/node/v13.2.0/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:1911:10)
        at Parser.pp.expect (/home/sherlock/.nvm/versions/node/v13.2.0/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:1899:35)
        at Parser.pp$3.parseObj (/home/sherlock/.nvm/versions/node/v13.2.0/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:4148:18)
        at Parser.pp$3.parseExprAtom (/home/sherlock/.nvm/versions/node/v13.2.0/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:3885:29)
        at Parser.parseExprAtom (/home/sherlock/.nvm/versions/node/v13.2.0/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:7426:30)
        at Parser.pp$3.parseExprSubscripts (/home/sherlock/.nvm/versions/node/v13.2.0/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:3655:21)
        at Parser.pp$3.parseMaybeUnary (/home/sherlock/.nvm/versions/node/v13.2.0/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:3635:21)
        at Parser.pp$3.parseExprOps (/home/sherlock/.nvm/versions/node/v13.2.0/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:3565:21)
        at Parser.pp$3.parseMaybeConditional (/home/sherlock/.nvm/versions/node/v13.2.0/lib/node_modules/html-to-react-components/node_modules/babylon/lib/index.js:3542:21) {
      pos: 263,
      loc: Position { line: 3, column: 88 }
    }
    
    Reviewed by raniaamina at 2022-03-10 10:40
  • 14. Bump ajv from 6.7.0 to 6.12.6

    Bumps ajv from 6.7.0 to 6.12.6.

    Release notes

    Sourced from ajv's releases.

    v6.12.6

    Fix performance issue of "url" format.

    v6.12.5

    Fix uri scheme validation (@​ChALkeR). Fix boolean schemas with strictKeywords option (#1270)

    v6.12.4

    Fix: coercion of one-item arrays to scalar that should fail validation (failing example).

    v6.12.3

    Pass schema object to processCode function Option for strictNumbers (@​issacgerges, #1128) Fixed vulnerability related to untrusted schemas (CVE-2020-15366)

    v6.12.2

    Removed post-install script

    v6.12.1

    Docs and dependency updates

    v6.12.0

    Improved hostname validation (@​sambauers, #1143) Option keywords to add custom keywords (@​franciscomorais, #1137) Types fixes (@​boenrobot, @​MattiAstedrone) Docs:

    v6.11.0

    Time formats support two digit and colon-less variants of timezone offset (#1061 , @​cjpillsbury) Docs: RegExp related security considerations Tests: Disabled failing typescript test

    v6.10.2

    Fix: the unknown keywords were ignored with the option strictKeywords: true (instead of failing compilation) in some sub-schemas (e.g. anyOf), when the sub-schema didn't have known keywords.

    v6.10.1

    Fix types Fix addSchema (#1001) Update dependencies

    v6.10.0

    Option strictDefaults to report ignored defaults (#957, @​not-an-aardvark) Option strictKeywords to report unknown keywords (#781)

    v6.9.0

    OpenAPI keyword nullable can be any boolean (and not only true). Custom keyword definition changes:

    • dependencies option in to require the presence of keywords in the same schema.

    ... (truncated)

    Commits
    • fe59143 6.12.6
    • d580d3e Merge pull request #1298 from ajv-validator/fix-url
    • fd36389 fix: regular expression for "url" format
    • 490e34c docs: link to v7-beta branch
    • 9cd93a1 docs: note about v7 in readme
    • 877d286 Merge pull request #1262 from b4h0-c4t/refactor-opt-object-type
    • f1c8e45 6.12.5
    • 764035e Merge branch 'ChALkeR-chalker/fix-comma'
    • 3798160 Merge branch 'chalker/fix-comma' of git://github.com/ChALkeR/ajv into ChALkeR...
    • a3c7eba Merge branch 'refactor-opt-object-type' of github.com:b4h0-c4t/ajv into refac...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-11 21:43
  • 15. Bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-09-21 03:15
  • 16. Suggestion: Support /dev/stdin and absolute paths

    It would be useful to pipe HTML directly into this tool with something like:

    curl $URL | pup 'body' | npx -p html-to-react-components html2react

    or

    curl $URL | pup 'body' | npx -p html-to-react-components html2react -

    It would also be useful to support absolute paths like:

    curl $URL | pup 'body' | npx -p html-to-react-components html2react /dev/stdin

    or

    curl $URL | pup 'body' > /tmp/file.html && npx -p html-to-react-components html2react /tmp/file.html

    If there is support for this issue I will try to implement, unless the maintainer already has a method in mind. I thought there might be some interface considerations since globbing is used.

    Reviewed by CreativeCactus at 2021-09-18 07:45
  • 17. Bump tar from 4.4.8 to 4.4.19

    Bumps tar from 4.4.8 to 4.4.19.

    Commits
    • 9a6faa0 4.4.19
    • 70ef812 drop dirCache for symlink on all platforms
    • 3e35515 4.4.18
    • 52b09e3 fix: prevent path escape using drive-relative paths
    • bb93ba2 fix: reserve paths properly for unicode, windows
    • 2f1bca0 fix: prune dirCache properly for unicode, windows
    • 9bf70a8 4.4.17
    • 6aafff0 fix: skip extract if linkpath is stripped entirely
    • 5c5059a fix: reserve paths case-insensitively
    • fd6accb 4.4.16
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-09-01 04:58
Automatically AJAXify plain HTML with the power of React. It's magic!

React-Magic and HTMLtoJSX React-Magic is an experimental library that uses the power of Facebook's React library to inject AJAX-loading goodness into

May 11, 2022
JSONX - Create React Elements, JSX and HTML from JSON

JSONX Description JSONX is a module that creates React Elements, JSX and HTML from JSON. Declarative The JSONX UMD comes with batteries included so yo

May 11, 2022
Auto-increment your HTML headings (h1, h2, etc.) for improved accessibility and SEO.
Auto-increment your HTML headings (h1, h2, etc.) for improved accessibility and SEO.

React Headings Never worry about using the wrong heading level (h1, h2, etc.) in complex React apps! React-headings maintains the proper hierarchy of

Apr 25, 2022
In this repo you will find the sample project where we dive deeper into the nuances of how hooks work, particularly in the context of the React render/rerender cycle.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Jan 29, 2022
This tutorial to guide you how to add react.js into shopify normal theme

Integrate-react.js-into-shopify-theme Tutorial to integrate the react.js into shopify theme https://prnt.sc/1w0rgx0 Step note: you have to run theme w

Mar 8, 2022
Appends a new DOM node to the end of the `document.body` and renders it's child React tree into it.

@react-lit/portal Appends a new DOM node to the end of the document.body and renders it's child React tree into it. Useful to break out of the DOM hie

Dec 9, 2021
Lift a React component's state into the url
Lift a React component's state into the url

with-url-state Lifts the state out of a react component and into the url Hooks There is a hook based api available on the 3.0.0 branch, published as a

May 11, 2022
Open Source Module to Upload your Media and files into AWS S3 Bucket directly from Front-end React

react-aws-s3 Open Source Module to Upload your Media and files into AWS S3 Bucket directly from Front-end React. Help the Module developer (Amit Mishr

Apr 22, 2022
Just a small collection of hooks that make it easy to integrate React Query into a REST API

react-query-restful is just a small collection of hooks that make it easy to integrate React Query into a REST API.

May 7, 2022
Step-by-step guide on compiling C++ codes with Emscripten into wasm and using it with Webpack + Typescript + React setup
Step-by-step guide on compiling C++ codes with Emscripten into wasm and using it with Webpack + Typescript + React setup

Step-by-step guide on compiling C++ codes with Emscripten into wasm and using it with Webpack + Typescript + React setup

May 10, 2022
A javascript microframework to shorten daily use CSS class manipulator methods by adding them all into a single method

CSS Class Builder A small typescript package built to work with ReactJS to short

Jan 7, 2022
This command line can be used to convert React class components to become functional components

class-to-function This command line can be used to convert React class components to become functional components. Installation Install it as a global

Mar 8, 2022
We have updated our application over to using hooks and functional components to replace any class components we had before.
We have updated our application over to using hooks and functional components to replace any class components we had before.

Crwn hooks We have updated our application over to using hooks and functional components to replace any class components we had before. How to fork an

Feb 10, 2022
📑 A React component to easily create demos of other components
📑 A React component to easily create demos of other components

React DemoTab ?? A React component to easily create demos of other components Install npm install react-demo-tab Demo DemoTab example Example import R

Apr 22, 2022
React components for implementing UI experiments

react-experiments react-experiments is a set of React components for implementing UI experiments. For additional context behind why we built this, che

Apr 9, 2022
Emoji picker reusable components writed with React 📘, Vue 📗
Emoji picker reusable components writed with React 📘, Vue 📗

Emoji picker component to selected emojis and search by groups. This component is created to work with ReactJs and VueJS.

Dec 2, 2021
A set of components using React Aria and Tailwind

React Aria Tailwind A set of components using React Aria and Tailwind. Very early WIP. Why? React Aria is a low level library of React Hooks that help

Apr 26, 2022
Projeto da 6 NLW de React da @Rocketseat, desenvolvido utilizando Firebase, Styled-Components e Typescript.
Projeto da 6 NLW de React da @Rocketseat, desenvolvido utilizando Firebase, Styled-Components e Typescript.

Letmeask ?? Crie salas de Q&A ao-vivo. Tire as suas dúvidas da sua audiência em tempo-real ?? Tecnologias usadas ReactJS + Typescript Styled-component

Jan 19, 2022
May 12, 2022