Skip to content

Commit 1365d3c

Browse files
a7ula7ul
committed
Added more readme
1 parent 9b72a6b commit 1365d3c

File tree

2 files changed

+65
-4
lines changed

2 files changed

+65
-4
lines changed

‎README.md

+64-3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@
22

33
Build and export React Components as Web Components without any extra effort.
44

5+
Size = ~3kb after gzip
6+
7+
# Use cases
8+
9+
- Export existing react components as web components so you can use them with Vue or Angular.
10+
- Use rich react api to build web components with state management/etc
11+
- 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.
12+
- 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.
13+
- Maybe (not tried) you can embed another old react app (wrapped with this module) inside ur current react app.
14+
515
# Install
616

717
```
@@ -16,7 +26,9 @@ yarn add react-webcomponentify
1626

1727
# Usage
1828

19-
**Basic**
29+
### Basic
30+
31+
**Simple use case**
2032

2133
```js
2234
import React from "react";
@@ -42,7 +54,11 @@ In HTML:
4254
</html>
4355
```
4456

45-
**Advanced**
57+
### Advanced
58+
59+
**Sending non string props to react**
60+
61+
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.
4662

4763
```js
4864
import React from "react";
@@ -88,4 +104,49 @@ element.setProps({
88104
})
89105
```
90106

91-
# More detailed examples and scenarios coming soon...
107+
**What about child elements?**
108+
109+
Thats possible too 😎
110+
111+
```js
112+
import React from "react";
113+
import { registerAsWebComponent } from "react-webcomponentify";
114+
115+
// You access the children just like you would in react (using this.props.children)
116+
export const ComponentWithChild = props => {
117+
return (
118+
<div>
119+
Hello World
120+
{this.props.text}
121+
<div>{this.props.children}</div>
122+
</div>
123+
);
124+
};
125+
126+
registerAsWebComponent(ComponentWithChild, "component-with-child");
127+
```
128+
129+
In HTML:
130+
131+
```html
132+
<!DOCTYPE html>
133+
<html>
134+
....
135+
<body>
136+
<component-with-child text="I love children">
137+
<p>Some child</p>
138+
</component-with-child>
139+
</body>
140+
....
141+
</html>
142+
```
143+
144+
This will send `<p>Some Child</p>` via this.props.children to the React component `ComponentWithChild`.
145+
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/master-atul/react-webcomponentify/blob/master/src/react-dom-child.js
146+
But for implementation purposed use it like a regular child component.
147+
148+
# TODO
149+
150+
- Live Demos
151+
- Maybe Typescript this?
152+
- Test cases

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-webcomponentify",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"description": "Build and export React Components as Web Components without any extra effort.",
55
"main": "dist/build.js",
66
"scripts": {

0 commit comments

Comments
 (0)