react-web-component - npm Package Compare versions

Comparing version 1.0.11-alpha to 1.0.13-alpha

package.json

 {
   "name": "react-web-component",
-  "version": "1.0.11-alpha",
+  "version": "1.0.13-alpha",
   "description": "Create Web Components with React",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -11,2 +11,3 @@ <p align="center">
 * [Basic Usage](#basic-usage)
+* [Lifecycle methods](#lifecycle-methods)
 * [Adding CSS to your web component using `react-web-component-style-loader`](#adding-css-to-your-web-component-using-react-web-component-style-loader)
@@ -50,2 +51,39 @@ * [Adding CSS to your web component imperatively](#adding-css-to-your-web-component-imperatively)
 
+## Lifecycle methods
+
+Web Components have their own lifecycle methods so we proxy them to your React Component. The following table shows which Web Component lifecycle method will trigger which lifecycle method on your React Component:
+
+| Web Component            | React Component              |
+| -----------------------  | ---------------------------- |
+| attachedCallback         | webComponentAttached         |
+| connectedCallback        | webComponentConnected        |
+| disconnectedCallback     | webComponentDisconnected     |
+| attributeChangedCallback | webComponentAttributeChanged |
+| adoptedCallback          | webComponentAdopted          |
+
+**Example:**
+
+```javascript
+import React from 'react';
+import ReactWebComponent from 'react-web-component';
+
+class App extends React.Component {
+
+  componentDidMount() {
+    // Regular React lifecycle method
+  }
+
+  webComponentAttached() {
+    // will be called when the Web Component has been attached
+  }
+
+  render() {
+    return <div>Hello World!</div>;
+  }
+}
+
+ReactWebComponent.create(<App />, 'my-component');
+```
+
+
 ## Adding CSS to your web component using `react-web-component-style-loader`
@@ -52,0 +90,0 @@

No alert changes

Improved metrics

Total package byte prevSize

38957

increased by2.98%

Number of lines in readme file

179

increased by26.95%

No dependency changes