Skip to content

Commit 008acbb

Browse files
author
Christopher J Baker
authored
React 17 (#105)
1 parent f7aef32 commit 008acbb

File tree

5 files changed

+25
-68
lines changed

5 files changed

+25
-68
lines changed

‎package-lock.json

Lines changed: 3 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/legacy/README.md

Lines changed: 11 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22

33
`react-to-webcomponent` 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.
44

5+
> Note: This is a compatibility wrapper around our new, simpler API. We highly reccomend using the new [@r2wc/react-to-web-component](https://github.com/bitovi/react-to-web-component) package.
6+
57
`react-to-webcomponent`:
68

79
- Works in all modern browsers. (Edge needs a [customElements polyfill](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements)).
8-
- Is `1.11KB` minified and gzipped.
10+
- Is `1.37KB` minified and gzipped.
911

1012
## Need help or have questions?
1113

@@ -30,8 +32,9 @@ With our React component complete, all we have to do is call `r2wc` and [customE
3032

3133
```js
3234
import React from "react"
33-
import * as ReactDOM from "react-dom/client" // if using React 18
34-
// import * as ReactDOM from "react-dom" // if using React 17
35+
import ReactDOM from "react-dom/client" // if using React 18
36+
// import ReactDOM from "react-dom" // if using React 17
37+
3538
import r2wc from "react-to-webcomponent"
3639

3740
const WebGreeting = r2wc(Greeting, React, ReactDOM)
@@ -87,22 +90,15 @@ We also have a [complete example using a third party library](docs/complete-exam
8790
To install from npm:
8891

8992
```
90-
npm i react-to-webcomponent
93+
npm install react-to-webcomponent
9194
```
9295

93-
## External Examples
94-
95-
Greeting example in a [CodePen](https://codepen.io/bavinedwards/pen/jOveaGm)
96-
97-
Greeting example in [CodeSandbox](https://codesandbox.io/s/sample-greeting-app-ts-qwidh9)
98-
99-
Hello, world example (React17) in [CodeSandbox](https://codesandbox.io/s/hello-world-react17-u4l3x1)
96+
## Examples
10097

101-
Example with all prop types in [CodeSandbox](https://codesandbox.io/p/sandbox/vite-example-with-numerous-types-gjf87o)
98+
* [Greeting](https://codesandbox.io/s/greeting-legacy-8oopz3)
99+
* [All the Props](https://codesandbox.io/s/all-the-props-legacy-0zh6iv)
102100

103-
R2WC With Vite Header Example in [CodeSandbox](https://codesandbox.io/p/sandbox/header-example-e4x25q)
104-
105-
## External Blog Posts
101+
## Blog Posts
106102

107103
R2WC with Vite [View Post](https://www.bitovi.com/blog/react-everywhere-with-vite-and-react-to-webcomponent)
108104

@@ -112,17 +108,6 @@ R2WC with Create React App (CRA) [View Post](https://www.bitovi.com/blog/how-to-
112108

113109
Check out our [full API documentation](../../docs/api.md).
114110

115-
`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:
116-
117-
- re-renders the React component inside the custom element.
118-
- creates an enumerable getter / setter on the instance
119-
to save the set value and avoid hitting the proxy in the future.
120-
121-
Also:
122-
123-
- Enumerable properties and values on the custom element are used as the `props` passed to the React component.
124-
- The React component is not rendered until the custom element is inserted into the page.
125-
126111
# We want to hear from you.
127112

128113
Come chat with us about open source in our Bitovi community [Discord](https://discord.gg/J7ejFsZnJ4).

‎packages/legacy/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-to-webcomponent",
3-
"version": "2.0.0-alpha.5",
3+
"version": "1.0.0-alpha.5",
44
"description": "Convert React components to native Web Components.",
55
"homepage": "https://www.bitovi.com/frontend-javascript-consulting/react-consulting",
66
"author": "Bitovi",
@@ -42,7 +42,7 @@
4242
"build": "vite build"
4343
},
4444
"dependencies": {
45-
"@r2wc/core": "^0.0.0-alpha.0"
45+
"@r2wc/core": "^1.0.0"
4646
},
4747
"devDependencies": {
4848
"@types/react": "^17.0.0",

‎packages/react-to-web-component/README.md

Lines changed: 7 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22

33
`@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.
44

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+
57
`@r2wc/react-to-web-component`:
68

79
- Works in all modern browsers. (Edge needs a [customElements polyfill](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements)).
8-
- Is `1.11KB` minified and gzipped.
10+
- Is `1.26KB` minified and gzipped.
911

1012
## Need help or have questions?
1113

@@ -46,8 +48,6 @@ Now we can use `<web-greeting>` like any other HTML element!
4648
</body>
4749
```
4850

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-
5151
In the above case, the web-greeting custom element is not making use of the `name` property from our `Greeting` component.
5252

5353
## Working with Attributes
@@ -89,19 +89,12 @@ To install from npm:
8989
npm install @r2wc/react-to-web-component
9090
```
9191

92-
## External Examples
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
9993

100-
Example with all prop types in [CodeSandbox](https://codesandbox.io/p/sandbox/vite-example-with-numerous-types-gjf87o)
94+
* [Greeting](https://codesandbox.io/s/greeting-react-17-u4l3x1)
95+
* [All the Props](https://codesandbox.io/s/all-the-props-react-17-x09rxo)
10196

102-
R2WC With Vite Header Example in [CodeSandbox](https://codesandbox.io/p/sandbox/header-example-e4x25q)
103-
104-
## External Blog Posts
97+
## Blog Posts
10598

10699
R2WC with Vite [View Post](https://www.bitovi.com/blog/react-everywhere-with-vite-and-react-to-webcomponent)
107100

@@ -111,17 +104,6 @@ R2WC with Create React App (CRA) [View Post](https://www.bitovi.com/blog/how-to-
111104

112105
Check out our [full API documentation](../../docs/api.md).
113106

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-
125107
# We want to hear from you.
126108

127109
Come chat with us about open source in our Bitovi community [Discord](https://discord.gg/J7ejFsZnJ4).

‎packages/react-to-web-component/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
],
1212
"repository": {
1313
"type": "git",
14-
"url": "git+https://github.com/bitovi/react-to-webcomponent.git"
14+
"url": "git+https://github.com/bitovi/react-to-web-component.git"
1515
},
1616
"type": "module",
1717
"main": "./dist/react-to-web-component.cjs",
@@ -42,7 +42,7 @@
4242
"build": "vite build"
4343
},
4444
"dependencies": {
45-
"@r2wc/core": "^0.0.0-alpha.0"
45+
"@r2wc/core": "^1.0.0"
4646
},
4747
"devDependencies": {
4848
"@types/react": "^17.0.0",

0 commit comments

Comments
 (0)