@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.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.