npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

inferno-compat

v8.2.3

Published

Provides a compatibility with React codebases

Downloads

105,687

Readme

inferno-compat

This module is a compatibility layer that makes React-based modules work with Inferno, without any code changes.

It provides the same exports as react and react-dom, meaning you can use your build tool of choice to drop it in where React is being depended on.

Do note however, as with almost all compatability layer libraries, there is an associated cost of extra overhead. As such, you should never expect native Inferno performance when using inferno-compat.

You might not always need the inferno-compat package. Just the alias to Inferno might be enough.

Inferno-compat adds the following features:

As in React:

  • ClassName is copied to props
  • Children is copied to props (for html vNodes too)
  • String refs are supported
  • Empty props are always created for element vNodes
  • You can create Components based on string
  • findDOMNOde -method is available
  • Iterable data structures are supported
  • Children.(map/forEach/count/only/toArray) - methods are available
  • Html properties are transformed to inferno compatible format
  • Some form events (fe: onChange) are transformed to native alternative
  • PureComponent is available
  • unstable_renderSubtreeIntoContainer - method is available
  • DOM - factory is available
  • unmountComponentAtNode - method is available its same as "render(null, container)"

How to install?

Inferno-compat does not automatically install all its features. For example: If you need createElement support you should also install inferno-create-element.

All packages:

npm install --save inferno
npm install --save inferno-compat
npm install --save inferno-clone-vnode
npm install --save inferno-create-class
npm install --save inferno-create-element

If you use React/lib/ReactCSSTransitionGroup.js

install inferno-transition-group package.

If you use React/lib/ReactCSSTransitionGroup.js

install rc-css-transition-group-modern package.

What is currently supported?

react

  • React.createClass
  • React.createElement
  • React.cloneElement
  • React.Component
  • React.PureComponent
  • React.PropTypes
  • React.Children
  • React.isValidElement

Note: Inferno will not currently validate PropTypes

react-dom

  • ReactDOM.render
  • ReactDOM.hydrate
  • ReactDOM.unmountComponentAtNode
  • ReactDOM.findDOMNode
  • React.DOM
  • React.createFactory

Usage with Webpack

Using inferno-compat with Webpack is easy.

All you have to do is add an alias for react and react-dom:

{
	resolve: {
		alias: {
			'react': 'inferno-compat',
			'react-dom': 'inferno-compat'
		}
	}
}

Usage with Babel

Install the Babel plugin for module aliasing: npm install --save-dev babel-plugin-module-resolver.

Babel can now alias react and react-dom to inferno by adding the following to your .babelrc file:

{
    "plugins": [
        ["module-resolver", {
            "root": ["."],
            "alias": {
                "react": "inferno-compat",
                "react-dom": "inferno-compat"
            }
        }]
    ]
}

Usage with Browserify

Using inferno-compat with Browserify is as simple as installing and configuring aliasify.

First, install it: npm install --save-dev aliasify

... then in your package.json, configure aliasify to alias react and react-dom:

{
    // ...
    "aliasify": {
        "aliases": {
            "react": "inferno-compat",
            "react-dom": "inferno-compat"
        }
    }
    // ...
}

Once Aliased

With the above Webpack or Browserify aliases in place, existing React modules should work nicely:

import React from 'react';
import ReactDOM from 'react-dom';

class Foo extends React.Component {
    propTypes = {
        a: React.PropTypes.string.isRequired
    };
    render() {
        let { a, b, children } = this.props;
        return <div {...{a,b}}>{ children }</div>;
    }
}

ReactDOM.render((
    <Foo a="a">test</Foo>
), document.getElementById("app"));