From 77a53ceb01b25b54d322f25a5e4e576073b0d8b4 Mon Sep 17 00:00:00 2001 From: Igor Kopach Date: Fri, 21 May 2021 21:55:08 +0200 Subject: [PATCH 1/3] docs(readme): fix some linter issues --- README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index d5d2010..94b9b00 100644 --- a/README.md +++ b/README.md @@ -12,30 +12,30 @@ _\* works nicely with preact aswell: See demo_ ## Show me live demo? -- Demo Link: https://a7ul.github.io/webcomponents-with-react-webcomponentify/ -- Demo source code (recommended): https://github.com/a7ul/webcomponents-with-react-webcomponentify +- Demo Link: +- Demo source code (recommended): -# Use cases +## Use cases - **Export existing react components as web components** so you can use them with Vue or Angular. -- **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 +- **Use react's rich api to build web components** with state management, etc. Instruction on how to do exactly that and Live Demo here: - 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. - 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. - Maybe (not tried) you can embed another old react app (wrapped with this module) inside ur current react app. -# Install +## Install -``` +```bash npm install react-webcomponentify ``` or -``` +```bash yarn add react-webcomponentify ``` -# Usage +## Usage ### Basic @@ -67,7 +67,7 @@ In HTML: ### Advanced -**Sending non string props to react** +#### Sending non string props to react 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. @@ -115,7 +115,7 @@ element.setProps({ }) ``` -**What about child elements?** +#### What about child elements? Thats possible too 😎 @@ -156,7 +156,7 @@ This will send `

Some Child

` via this.props.children to the React componen Note that `

Some Child

` 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 But for implementation purposed use it like a regular child component. -# Maintainers +## Maintainers From 5d8c9ab02847cb4a68fb658029827cf63d4769ba Mon Sep 17 00:00:00 2001 From: Igor Kopach Date: Fri, 21 May 2021 21:55:56 +0200 Subject: [PATCH 2/3] docs(readme): add table of contents --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 94b9b00..3dd3f36 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,17 @@ _\* works nicely with preact aswell: See demo_ - Demo Link: - Demo source code (recommended): +### Table of Contents + +- [Use cases](#use-cases) +- [Install](#install) +- [Usage](#usage) + - [Basic](#basic) + - [Advanced](#advanced) + - [Sending non string props to react](#sending-non-string-props-to-react) + - [What about child elements?](#what-about-child-elements) +- [Maintainers](#maintainers) + ## Use cases - **Export existing react components as web components** so you can use them with Vue or Angular. From a5cd76f2568ec3f15446bb3e85da06bef0e52545 Mon Sep 17 00:00:00 2001 From: Igor Kopach Date: Fri, 21 May 2021 21:56:23 +0200 Subject: [PATCH 3/3] docs(readme): add information about TypeScript --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 3dd3f36..8dfb289 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,7 @@ _\* works nicely with preact aswell: See demo_ - [Advanced](#advanced) - [Sending non string props to react](#sending-non-string-props-to-react) - [What about child elements?](#what-about-child-elements) + - [TypeScript support](#typescript-support) - [Maintainers](#maintainers) ## Use cases @@ -167,6 +168,10 @@ This will send `

Some Child

` via this.props.children to the React componen Note that `

Some Child

` 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 But for implementation purposed use it like a regular child component. +### TypeScript support + +This library is written in TypeScript. All declarations are included. + ## Maintainers