@christianmurphy/reactive-elements
Advanced tools
Readme
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 2 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.