In Reactjs, een aangepaste provider is een component die gegevens deelt met andere componenten in de applicatie. Vaak worden context en wrappers gebruikt om een aangepaste provider te maken en gebruiken. De code structureert zich meestal als volgt:
Eerst, maak je de context:
```
import React from ‘react’;
const MyContext = React.createContext();
```
Creëer vervolgens een provider-component die je context aan je componenten zal geven:
```
class MyProvider extends React.Component {
state = {
value: ‘Hello, world!’,
};
In deze code wordt de `Provider` in de rendering geretourneerd, en de waarde die hij doorgeeft is een object dat de huidige staat en een methode om de staat in te stellen bevat.
Nu kun je de provider in je componentboom invoegen:
```
function App() {
return (
}
```
En gebruik de context in een andere component:
```
class MyComponent extends React.Component {
static contextType = MyContext;
{this.context.state.value}
Op deze manier wordt `MyProvider` een aangepaste provider die de staat controleert en deze deelt met zijn kind-componenten. Je kunt de gedeelde staat ophalen met `this.context.state` en de staat in stellen via `this.context.setState` in de kind-componenten.
