Failed to compile with React

[javaspeak]

Failed to compile.

TS2339: Property 'scrollable-component' does not exist on type 'JSX.IntrinsicElements'.
    10 |   return (
    11 |     <>
  > 12 |       <scrollable-component class="my-content">
       |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    13 |         <div>I am a MessageThread</div>
    14 |       </scrollable-component>
    15 |     </>

I think this is because React wants it to start with a capital letter instead of lower case.

[Julien-Marcou]

Unfortunately I'm no familiar with React.

I found this article which explains how you can use a web-component within React:
https://web-highlights.com/blog/how-to-use-web-components-in-react/

Seems like you have to override the definition of JSX.IntrinsicElements to let know React it is a valid HTML element.

Also, React philosophy is built around server side rendering, but this component cannot be server side rendered, so I believe you have to lazy load it and not import it on the server side.

Here is another issue related to this second problem: #5

Maybe it can help solve your problem, let me know if you find a solution.

[avosa]

Looks like the library doesn't support React out of the box. To add React support to the Scrollable-Component library, you can create a React wrapper component around the existing library. This would allow you to use it seamlessly in a React application. Here are the steps to create the React wrapper component:

1. Install the Scrollable-Component library, if you haven't already:

npm install scrollable-component

2. Create a new file named ScrollableComponent.js in your React project's components directory say src/components.

import React from 'react';
import PropTypes from 'prop-types';
import './ScrollableComponent.css';

const ScrollableComponent = ({ children }) => {
  return (
    <div className="scrollable-component">
      {children}
    </div>
  );
};

ScrollableComponent.propTypes = {
  children: PropTypes.node.isRequired,
};

export default ScrollableComponent;

3. Create a new CSS file named ScrollableComponent.css in the same directory as ScrollableComponent.js to do little styling.

.scrollable-component {
    overflow-y: scroll;
    max-height: 400px; /* You can adjust the height to your needs */
    width: 100%; /* Adjust the width as needed */
    padding: 16px; /* Add some padding for better appearance */
    border: 1px solid #ccc; /* Add a border for better appearance */
    box-sizing: border-box;
  }

4. Now you can use the ScrollableComponent in your React application:

import ScrollableComponent from './components/ScrollableComponent';

const App = () => {
  return (
    <div className="App">
      <ScrollableComponent>
        { <div>I am a MessageThread</div> }
      </ScrollableComponent>
    </div>
  );
};

export default App;

This custom scrollable component should work and display the scrollable content correctly. I hope that helps.