Un provider personalizzato in React.js può essere utilizzato per passare i dati direttamente a componenti figlio senza doverli passare attraverso nastri di props. Questa è una caratteristica fornita dal Context API di React.
Ecco come puoi creare e utilizzare un provider personalizzato in React:
1. Creare un Context
Prima di tutto, crei un Context utilizzando `React.createContext()`.
```
import React from ‘react’;
const MyContext = React.createContext();
```
Questo `MyContext` oggetto ha due componenti React, `Provider` e `Consumer` che puoi usare per passare e ricevere dati, rispettivamente.
1. Creare un Provider
Ora, crei un `Provider` componente personalizzato. Il `Provider` componente accetta un `value` prop, che può essere qualsiasi valore, funzione o oggetto che si desidera condividere con il resto dell’app.
```
class MyProvider extends React.Component {
state = {
name: ‘John Doe’,
};
In questo esempio, sto passando l’intero `state` come valore ma sei libero di passare qualsiasi cosa tu voglia.
1. Utilizzare il Provider
Involvi l’app o una qualsiasi componente padre con il tuo Provider personalizzato.
```
< MyProvider >
< /MyProvider>
```
Tutti i componenti figlio avranno ora accesso ai dati forniti dal Provider.
1. Consumare i Dati
Dentro il tuo componente figlio, è possibile accedere ai dati da `MyProvider` utilizzando `MyContext.Consumer`.
``` {context.state.name}< /p>
)} `MyContext.Consumer` utilizza la funzione come un figlio che permette di accedere al `context` (cioè i dati forniti dal Provider). E questo è tutto! Hai appena creato e utilizzato un provider personalizzato in React.
< /MyContext.Consumer>
```
