https://github.com/reactive-elements/reactive-elements
Allows to use React.js component as HTML element (web component)
https://github.com/reactive-elements/reactive-elements
reactjs webcomponents
Last synced: 28 days ago
JSON representation
Allows to use React.js component as HTML element (web component)
- Host: GitHub
- URL: https://github.com/reactive-elements/reactive-elements
- Owner: reactive-elements
- Created: 2014-03-24T17:24:07.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T16:51:36.000Z (about 3 years ago)
- Last Synced: 2025-05-14T00:01:16.082Z (8 months ago)
- Topics: reactjs, webcomponents
- Language: JavaScript
- Homepage:
- Size: 2.85 MB
- Stars: 696
- Watchers: 18
- Forks: 45
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this 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
```sh
npm install reactive-elements
yarn add reactive-elements
```
## How to use?
### Directly in a browser
**Placing component in a pure HTML**
```html
```
**React class definition**
```js
/* @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 (
- React content
);
},
});
ReactiveElements('my-react-component', MyComponent);
```
### With Bundler
```js
import React, { Component } from 'react';
import ReactiveElements from 'reactive-elements';
class Welcome extends Component {
render() {
return
Hello, {this.props.name}
;}
}
ReactiveElements('welcome-component', Welcome);
```
## Nesting
Original children of a custom element is injected to component as
`this.props.children`.
```html
Hello world
```
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:
```html
Hello world
```
Here, `this.props.isLoggedIn === true` within the React component.
If you don't want this behaviour you can disable it with a special attribute:
```html
Hello world
```
## Exposing components methods on custom element
If you want to expose React component methods on custom element - assign them to
component as following:
```js
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.
```js
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:
```js
var event = new CustomEvent('change', {
bubbles: true,
});
React.findDOMNode(this).dispatchEvent(event);
```
Subscribing to DOM events is similar:
```js
React.findDOMNode(this).addEventListener('change', function(e){...});
```
## Options
You can also specify options to the `ReactiveElements` call, e.g.
```js
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](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) inside the web-component instead.
## Dependencies
- [React.js](https://github.com/facebook/react)
- [React DOM](https://github.com/facebook/react)
- Custom elements support or
[polyfill](https://github.com/WebComponents/webcomponentsjs)
- Support or [polyfills](https://github.com/zloirock/core-js) 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
MIT: http://mit-license.org/
Copyright 2014 Denis Radin aka [PixelsCommander](http://pixelscommander.com)
Inspired by Christopher Chedeau`s
[react-xtags](http://github.com/vjeux/react-xtags/)