@lit-labs/react

What is @lit-labs/react?

@lit-labs/react is an npm package that provides utilities for integrating Lit components with React. It allows developers to use Lit-based web components seamlessly within React applications.

What are @lit-labs/react's main functionalities?

Creating React Components from Lit Elements

This feature allows you to create React components from Lit elements. The `createComponent` function takes React, the tag name of the custom element, and the Lit element class, and returns a React component that can be used in your React application.

import { createComponent } from '@lit-labs/react';
import * as React from 'react';
import { MyElement } from 'my-element';

const MyReactComponent = createComponent(React, 'my-element', MyElement);

export default MyReactComponent;

Passing Properties and Events

This feature allows you to pass properties and events from React to Lit elements. The fourth argument to `createComponent` is an object that maps React props to Lit element properties and events.

import { createComponent } from '@lit-labs/react';
import * as React from 'react';
import { MyElement } from 'my-element';

const MyReactComponent = createComponent(React, 'my-element', MyElement, {
  onClick: 'click',
  onCustomEvent: 'custom-event'
});

export default MyReactComponent;

Other packages similar to @lit-labs/react

react-web-component

The `react-web-component` package allows you to create web components from React components. It provides a way to use React components as custom elements, which can then be used in any web application. Unlike @lit-labs/react, which focuses on integrating Lit elements into React, `react-web-component` focuses on the opposite direction.

reactify-wc

The `reactify-wc` package is another utility for integrating web components with React. It provides a higher-order component (HOC) that wraps a web component and makes it usable in React. This package is similar to @lit-labs/react but offers a different API for achieving the same goal.

README

@lit-labs/react

React integration for Web Components and Reactive Controllers.

This package has graduated from labs! It is now available as @lit/react. This package is just a proxy that re-exports @lit/react. As a result, while it will no longer be updated, it will continue to work and get updates through the ^1.0.0 version range of @lit/react. This should reduce duplication of code while the ecosystem migrates their imports away from @lit-labs/react.

If you're looking at this locally or on GitHub, you can now find the README here: README.md.

If you're looking at this online, you can also find its README on npmjs: https://www.npmjs.com/package/@lit/react