You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[Sending non string props to react](#sending-non-string-props-to-react)
26
+
-[What about child elements?](#what-about-child-elements)
27
+
-[TypeScript support](#typescript-support)
28
+
-[Maintainers](#maintainers)
29
+
30
+
## Use cases
19
31
20
32
-**Export existing react components as web components** so you can use them with Vue or Angular.
21
-
-**Use react's rich api to build web components** with state management, etc. Instruction on how to do exactly that and Live Demo here: https://github.com/a7ul/webcomponents-with-react-webcomponentify
33
+
-**Use react's rich api to build web components** with state management, etc. Instruction on how to do exactly that and Live Demo here: <https://github.com/a7ul/webcomponents-with-react-webcomponentify>
22
34
- Lets say you are writing a component library with web components but you already have a huge collection of component in react.You can use this library to generate a component library with the existing components. And then safely continue to rewrite each one of them behind the scene. This makes sure other teams are not waiting for you to finish.
23
35
- For more crazy people - You can even export your entire react app as a web component and embed it into another app made with Angular or Vue. So you can keep writing newer parts of code in react while keeping your legacy code working on the side.
24
36
- Maybe (not tried) you can embed another old react app (wrapped with this module) inside ur current react app.
25
37
26
-
# Install
38
+
##Install
27
39
28
-
```
40
+
```bash
29
41
npm install react-webcomponentify
30
42
```
31
43
32
44
or
33
45
34
-
```
46
+
```bash
35
47
yarn add react-webcomponentify
36
48
```
37
49
38
-
# Usage
50
+
##Usage
39
51
40
52
### Basic
41
53
@@ -67,7 +79,7 @@ In HTML:
67
79
68
80
### Advanced
69
81
70
-
**Sending non string props to react**
82
+
#### Sending non string props to react
71
83
72
84
You can send serializable string props via the html attributes itself. But for props like callback functions or complex objects you can use the `setProps` method on the element as shown below.
73
85
@@ -115,7 +127,7 @@ element.setProps({
115
127
})
116
128
```
117
129
118
-
**What about child elements?**
130
+
#### What about child elements?
119
131
120
132
Thats possible too 😎
121
133
@@ -156,7 +168,11 @@ This will send `<p>Some Child</p>` via this.props.children to the React componen
156
168
Note that `<p>Some Child</p>` is a dom node and not a react component. So it will be wrapped with a simple react component found here: https://github.com/a7ul/react-webcomponentify/blob/master/src/react-dom-child.js
157
169
But for implementation purposed use it like a regular child component.
158
170
159
-
# Maintainers
171
+
### TypeScript support
172
+
173
+
This library is written in TypeScript. All declarations are included.
0 commit comments