bitovi / bitovi/react-to-web-component

Can we reuse React components with properties as Web Components with attributes without doing any extra work?

Open
#171 9 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
944
Forks
52
PR merge metrics
No merged PRs in 30d

Description

I'm trying to understand something from the README, which seems to tell me I have to do extra work to expose React components as Web Components when using properties.

In this example:
```html

```

Is there a way to actually hit the ground running with this by being able to forward any attributes to React automatically?

I have about 100 React components and I really don't want to add this code:

```js
const WebGreeting = r2wc(Greeting, {
props: {
name: "string",
},
```

The whole purpose of computer software is automation, and if I have to do that work manually, it's a waste of time.

I think if that is not supported automatically, you should support it by forwarding any data attributes under the `property` namespace automatically like this:

```html

```

Alternatively, forward `property-*` attributes instead if possible given it would be shorter syntax:

```html

```

Without support for that, this library is near useless to me, but I really need a library like this to enable using React components as Web Components.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the README example and the r2wc(...) props configuration shown in the issue. Determine how automatic forwarding should handle arbitrary attributes, property or data-property names, and value types; done should mean React components can receive the requested attributes without manually listing each prop.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.