Creating an adapter for using a Functional Component (or any Custom Element) as a React.js component

• Installation
• Usage

Installation

npm install @web-companions/react-adapter --save

Usage

index.jsx

import React, { useRef, useEffect } from 'react';
import { loadingProgressBar } from 'loading-progress-bar';
import { elementToReact } from '@web-companions/react-adapter';

const LoadingProgressBarReact = loadingProgressBar.adapter(elementToReact, 'loading-progress-bar');

export default function Example() {
  const myRef = useRef(null);

  useEffect(() => {
    setInterval(() => {
      myRef.current.generateProgress.next();
    }, 3000);
  });

  return (
    <div>
      <LoadingProgressBarReact ref={myRef}></LoadingProgressBarReact>
    </div>
  );
}