Labs Feedback: @lit-labs/react #3358
sorvell
announced in
Labs Feedback
Replies: 1 comment
-
👎 I'm not interested in this package. i'm using import React, { useState } from 'react';
import { register, MyButton } from 'awesome-components'; // my custom elements are built with Lit
register(MyButton);
export function App() {
const [myLabel, setMyLabel] = useState('');
const myClick = (event: CustomEvent) => {
console.log(event);
setMyLabel(event.detail.label);
};
return (
<>
<my-button my-label="My Button Text" onMyClick={myClick}></my-button>
{myLabel}
</>
);
} Working example: https://github.com/Shyam-Chen/Component-Starter/tree/main/examples/react |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
The
@lit-labs/react
package provides first class support for Lit based web components in React.While React can render Web Components, it cannot easily pass React props to custom element properties or event listeners. This package addresses these limitations by providing a utility wrapper
createComponent
which makes a React component wrapper for a custom element class. Note, improved support for custom elements is planned for a future React version and an experimental version is currently available.The package also provides a useController React custom hook that supports using Lit ReactiveControllers in React.
We want to collect your feedback on your experiences with
@lit-labs/react
as we iterate on it according to our Lit Labs process and move the package towards possible graduation or retirement.Please try
@lit-labs/react
and tell us about your experience. Leave comments with your thoughts; highlight what issues or missing features you're blocked on; give a link to a project that uses it; etc.And so we can have some numbers to look at, you can add reactions to this comment to indicate your experience with this package:
🚀 I have tried this package and it works great. I need it. Ship it!
👍 I have tried this package and it seems like a good idea.
😕 I have tried this package and would use it, but it has serious bugs or missing features.
👀 I am interested, but haven't tried the package yet.
👎 I'm not interested in this package.
Note: other reactions like 😄, 🎉, and ❤️ don't mean anything as part of this scheme. You probably mean, and please use, 🚀, 👍, or 👀.
Beta Was this translation helpful? Give feedback.
All reactions