Skip to content

Commit 08360f5

Browse files
authored
Readme update (#11)
* docs(readme): fix some linter issues * docs(readme): add table of contents * docs(readme): add information about TypeScript
1 parent ec48125 commit 08360f5

File tree

1 file changed

+27
-11
lines changed

1 file changed

+27
-11
lines changed

README.md

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,42 @@ _\* works nicely with preact aswell: See demo_
1212

1313
## Show me live demo?
1414

15-
- Demo Link: https://a7ul.github.io/webcomponents-with-react-webcomponentify/
16-
- Demo source code (recommended): https://github.com/a7ul/webcomponents-with-react-webcomponentify
15+
- Demo Link: <https://a7ul.github.io/webcomponents-with-react-webcomponentify/>
16+
- Demo source code (recommended): <https://github.com/a7ul/webcomponents-with-react-webcomponentify>
1717

18-
# Use cases
18+
### Table of Contents
19+
20+
- [Use cases](#use-cases)
21+
- [Install](#install)
22+
- [Usage](#usage)
23+
- [Basic](#basic)
24+
- [Advanced](#advanced)
25+
- [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
1931

2032
- **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>
2234
- 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.
2335
- 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.
2436
- Maybe (not tried) you can embed another old react app (wrapped with this module) inside ur current react app.
2537

26-
# Install
38+
## Install
2739

28-
```
40+
```bash
2941
npm install react-webcomponentify
3042
```
3143

3244
or
3345

34-
```
46+
```bash
3547
yarn add react-webcomponentify
3648
```
3749

38-
# Usage
50+
## Usage
3951

4052
### Basic
4153

@@ -67,7 +79,7 @@ In HTML:
6779

6880
### Advanced
6981

70-
**Sending non string props to react**
82+
#### Sending non string props to react
7183

7284
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.
7385

@@ -115,7 +127,7 @@ element.setProps({
115127
})
116128
```
117129

118-
**What about child elements?**
130+
#### What about child elements?
119131

120132
Thats possible too 😎
121133

@@ -156,7 +168,11 @@ This will send `<p>Some Child</p>` via this.props.children to the React componen
156168
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
157169
But for implementation purposed use it like a regular child component.
158170

159-
# Maintainers
171+
### TypeScript support
172+
173+
This library is written in TypeScript. All declarations are included.
174+
175+
## Maintainers
160176

161177
<table>
162178
<tr>

0 commit comments

Comments
 (0)