reactive-elements alternatives and similar libraries
Based on the "Framework bindings / integrations" category.
Alternatively, view reactive-elements alternatives based on common mentions on social networks and blogs.
-
react-on-rails
Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance. -
react-unity-webgl
React Unity WebGL provides a modern solution for embedding Unity WebGL builds in your React Application while providing advanced APIs for two way communication and interaction between Unity and React. -
backbone-react-component
A bit of nifty glue that automatically plugs your Backbone models and collections into your React components, on the browser and server -
gl-react
DISCONTINUED. OpenGL / WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm. -
gl-react-dom
WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm -
elm-react-component
DISCONTINUED. A React component which wraps an Elm module to be used in a React application.
CodeRabbit: AI Code Reviews for Developers
Do you think we are missing an alternative of reactive-elements or a related project?
README
Note! The docs here are for the v1.0.0 alpha. This is not ready for production use yet.
You should use this README, which refers to 0.10.0, the latest stable version on npm: https://github.com/PixelsCommander/ReactiveElements/blob/7cce3d7b472989878ac1433cec0e8168fd4136aa/README.md
Convert React.js components into Web Components
npm install reactive-elements
yarn add reactive-elements
How to use?
Directly in a browser
Placing component in a pure HTML
<body>
<my-react-component items="{window.someArray}"></my-react-component>
</body>
React class definition
/* @jsx React.DOM */
MyComponent = React.createClass({
render: function() {
console.log(this.props.items); // passed as HTML tag`s argument
console.log(this.props.children); // original tag children
return (
<ul>
<li>React content</li>
</ul>
);
},
});
ReactiveElements('my-react-component', MyComponent);
With Bundler
import React, { Component } from 'react';
import ReactiveElements from 'reactive-elements';
class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
ReactiveElements('welcome-component', Welcome);
Nesting
Original children of a custom element is injected to component as
this.props.children
.
<my-react-component>Hello world</my-react-component>
In this case this.props.children
is equal to "Hello world".
Container node of the element is passed as this.props.container
. Both
props.container and props.children have type of documentFragment
.
Boolean attribute transforms (added in version 0.7.0)
An attribute that has the value "true"
or "false"
will be converted into the
boolean true
or false
when given to the React component:
<my-react-component is-logged-in="true">Hello world</my-react-component>
Here, this.props.isLoggedIn === true
within the React component.
If you don't want this behaviour you can disable it with a special attribute:
<my-react-component is-logged-in="true" reactive-elements-no-boolean-transform>Hello world</my-react-component>
Exposing components methods on custom element
If you want to expose React component methods on custom element - assign them to component as following:
componentDidMount: function() {
this.props.container.setTextContent = this.setTextContent.bind(this);
}
Handling attributes change
You may add attributeChanged
callback to component in order to handle / modify
/ filter incoming values.
attributeChanged: function(attributeName, oldValue, newValue) {
console.log('Attribute ' + attributeName + ' was changed from ' + oldValue + ' to ' + newValue);
this.props[attributeName] = parseInt(newValue);
}
Communicate via DOM events
You may trigger DOM event from React component by using following snippet:
var event = new CustomEvent('change', {
bubbles: true,
});
React.findDOMNode(this).dispatchEvent(event);
Subscribing to DOM events is similar:
React.findDOMNode(this).addEventListener('change', function(e){...});
Options
You can also specify options to the ReactiveElements
call, e.g.
ReactiveElements('welcome-component', Welcome, options);
options.useShadowDom
(default false
)
By default, your React element is rendered directly into the web-component root. However, by setting this option - your React element will instead be rendered in a Shadow DOM inside the web-component instead.
Dependencies
- React.js
- React DOM
- Custom elements support or polyfill
- Support or polyfills for:
regexp.match
regexp.replace
object.define-setter
object.define-getter
object.define-property
function.name
web.dom.iterable
array.iterator
object.keys
object.set-prototype-of
reflect.construct
function.bind
License
Copyright 2014 Denis Radin aka PixelsCommander
Inspired by Christopher Chedeau`s react-xtags
*Note that all licence references and agreements mentioned in the reactive-elements README section above
are relevant to that project's source code only.