@r2wc/react-to-web-component 1.0.0-alpha.4 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -25
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
`@r2wc/react-to-web-component` converts [React](https://reactjs.org/) components to [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)! It lets you share React components as native elements that **don't** require mounted being through React. The custom element acts as a wrapper for the underlying React component. Use these custom elements with any project that uses HTML even in any framework (vue, svelte, angular, ember, canjs) the same way you would use standard HTML elements.
|
|
4
4
|
|
|
5
|
+
> Note: This package only works with the React 16 and 17. If you are using React 18, use version 2.0 or later.
|
|
6
|
+
|
|
5
7
|
`@r2wc/react-to-web-component`:
|
|
6
8
|
|
|
7
9
|
- Works in all modern browsers. (Edge needs a [customElements polyfill](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements)).
|
|
8
|
-
- Is `1.
|
|
10
|
+
- Is `1.26KB` minified and gzipped.
|
|
9
11
|
|
|
10
12
|
## Need help or have questions?
|
|
11
13
|
|
|
@@ -46,8 +48,6 @@ Now we can use `<web-greeting>` like any other HTML element!
|
|
|
46
48
|
</body>
|
|
47
49
|
```
|
|
48
50
|
|
|
49
|
-
Note that by using React 18, `r2wc` will use the new root API. If your application needs the legacy API, please use React 17
|
|
50
|
-
|
|
51
51
|
In the above case, the web-greeting custom element is not making use of the `name` property from our `Greeting` component.
|
|
52
52
|
|
|
53
53
|
## Working with Attributes
|
|
@@ -89,19 +89,12 @@ To install from npm:
|
|
|
89
89
|
npm install @r2wc/react-to-web-component
|
|
90
90
|
```
|
|
91
91
|
|
|
92
|
-
##
|
|
93
|
-
|
|
94
|
-
Greeting example in a [CodePen](https://codepen.io/bavinedwards/pen/jOveaGm)
|
|
95
|
-
|
|
96
|
-
Greeting example in [CodeSandbox](https://codesandbox.io/s/sample-greeting-app-ts-qwidh9)
|
|
97
|
-
|
|
98
|
-
Hello, world example (React17) in [CodeSandbox](https://codesandbox.io/s/hello-world-react17-u4l3x1)
|
|
92
|
+
## Examples
|
|
99
93
|
|
|
100
|
-
|
|
94
|
+
* [Greeting](https://codesandbox.io/s/greeting-react-17-u4l3x1)
|
|
95
|
+
* [All the Props](https://codesandbox.io/s/all-the-props-react-17-x09rxo)
|
|
101
96
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
## External Blog Posts
|
|
97
|
+
## Blog Posts
|
|
105
98
|
|
|
106
99
|
R2WC with Vite [View Post](https://www.bitovi.com/blog/react-everywhere-with-vite-and-react-to-webcomponent)
|
|
107
100
|
|
|
@@ -111,17 +104,6 @@ R2WC with Create React App (CRA) [View Post](https://www.bitovi.com/blog/how-to-
|
|
|
111
104
|
|
|
112
105
|
Check out our [full API documentation](../../docs/api.md).
|
|
113
106
|
|
|
114
|
-
`r2wc` creates a constructor function whose prototype is a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). This acts as a trap for any property set on instances of the custom element. When a property is set, the proxy:
|
|
115
|
-
|
|
116
|
-
- re-renders the React component inside the custom element.
|
|
117
|
-
- creates an enumerable getter / setter on the instance
|
|
118
|
-
to save the set value and avoid hitting the proxy in the future.
|
|
119
|
-
|
|
120
|
-
Also:
|
|
121
|
-
|
|
122
|
-
- Enumerable properties and values on the custom element are used as the `props` passed to the React component.
|
|
123
|
-
- The React component is not rendered until the custom element is inserted into the page.
|
|
124
|
-
|
|
125
107
|
# We want to hear from you.
|
|
126
108
|
|
|
127
109
|
Come chat with us about open source in our Bitovi community [Discord](https://discord.gg/J7ejFsZnJ4).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@r2wc/react-to-web-component",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Convert React components to native Web Components.",
|
|
5
5
|
"homepage": "https://www.bitovi.com/frontend-javascript-consulting/react-consulting",
|
|
6
6
|
"author": "Bitovi",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
],
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
14
|
-
"url": "git+https://github.com/bitovi/react-to-
|
|
14
|
+
"url": "git+https://github.com/bitovi/react-to-web-component.git"
|
|
15
15
|
},
|
|
16
16
|
"type": "module",
|
|
17
17
|
"main": "./dist/react-to-web-component.cjs",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"build": "vite build"
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@r2wc/core": "^1.0.0
|
|
45
|
+
"@r2wc/core": "^1.0.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@types/react": "^17.0.0",
|