@christianmurphy/reactive-elements
Advanced tools
npm install reactive-elements
yarn add reactive-elements
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);
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);
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.
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>
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);
}
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);
}
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){...});
regexp.matchregexp.replaceobject.define-setterobject.define-getterobject.define-propertyfunction.nameweb.dom.iterablearray.iteratorobject.keysobject.set-prototype-ofreflect.constructfunction.bindCopyright 2014 Denis Radin aka PixelsCommander
Inspired by Christopher Chedeau`s react-xtags
FAQs
use a React.js component as web component
The npm package @christianmurphy/reactive-elements receives a total of 0 weekly downloads. As such, @christianmurphy/reactive-elements popularity was classified as not popular.
We found that @christianmurphy/reactive-elements demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.