core-react-library-frankmd93

Core React Library

Libreria React con varie funzioni di utilità tra cui:

• Gestire chiamate HTTP con hook personalizzati basati su Axios.

---

Installazione

npm install core-react-library
# oppure
yarn add core-react-library

---

Funzionalità principali

• useHttpClient: hook per chiamate HTTP generiche (GET, POST, PUT, DELETE) senza stato.
• useHttpFetch: hook per fetch REST con gestione di loading, error e dati.
• useHttpProviderContext: accesso al contesto HTTP personalizzato.
• Tipi TypeScript: HttpFetchParameters, HttpRequestFunction, RequestOptions.

---

Esempi di utilizzo

useHttpClient

import React, { useEffect } from 'react';
import { useHttpClient } from 'core-react-library';

const MyComponent = () => {
  const get = useHttpClient();

  useEffect(() => {
    get('/api/data')
      .then(response => {
        console.log('Dati ricevuti:', response.data);
      })
      .catch(err => {
        console.error('Errore:', err);
      });
  }, [get]);

  if (loading) return <p>Caricamento...</p>;
  if (error) return <p>Errore: {error.message}</p>;

  return <div>Dati caricati correttamente</div>;
};

export default MyComponent;

---

useHttpFetch

import React from 'react';
import { useHttpFetch } from 'core-react-library';

const FetchList = () => {
  const [data, get] = useHttpFetch('/api/items', {
    options: {
      method: 'GET',
    },
  });

  if (data.isLoading) return <p>Caricamento...</p>;
  if (data.hasError) return <p>Errore: {data.error.message}</p>;

  return (
    <ul>
      {data.data?.map((item: any) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default FetchList;

---

Tipi TypeScript

• HttpFetchParameters: Parametri per configurare le chiamate HTTP.
• HttpRequestFunction: Tipo funzione per richieste HTTP.
• RequestOptions: Opzioni configurabili per le richieste.

---

DynamicLoader (Remote Web Component Loader)

Il componente DynamicLoader consente di caricare dinamicamente moduli remoti esposti tramite Webpack Module Federation e montarli come Web Component React.

Props principali

Prop	Tipo	Descrizione
remoteName	string	Nome del container remoto federato
remoteEntry	string	URL dell'entry federata (remoteEntry.js)
exposedModule	string	Nome del modulo esposto, es. MyComponent
id	string	ID univoco del web component (e custom element tag name)
inputsAndHandlers	Record<string, any>	Oggetto con props o eventi da passare al web component
children	React.ReactNode	Eventuali figli React
keepAlive	boolean	(Opzionale) mantiene il componente montato anche se cambia la chiave

Esempio di utilizzo

import React from 'react';
import { DynamicLoader } from 'core-react-library';

const App = () => {
  return (
    <DynamicLoader
      remoteName="remoteApp"
      remoteEntry="https://remote-app.com/remoteEntry.js"
      exposedModule="MyComponent"
      id="my-remote-web-component"
      inputsAndHandlers={{
        title: 'Ciao dal container',
        onClick: () => alert('Cliccato!')
      }}
    />
  );
};

Assicurati che il modulo remoto esponga i metodi initMyComponentWebComponent e MyComponentModule per poter essere inizializzato correttamente.

---

• Use the useBtcRate hook to fetch the current Bitcoin exchange rate
• Example usage:

import useBtcRate from './useBtcRate';

const MyComponent = () => {
  const [btcRate, fetchBtcRate] = useBtcRate();

  return (
    <div>
      <p>Current Bitcoin rate: {btcRate}</p>
      <button onClick={fetchBtcRate}>Refresh rate</button>
    </div>
  );
};

---

Contribuire

Sono benvenuti suggerimenti, issue e pull request per migliorare la libreria!

---

Licenza

MIT License