# ViewPay React JS: Guide de démarrage
Ce guide a pour objectif de vous guider dans la mise en place du widget JS ViewPay dans votre site web developper en reactJS.

## Installation
Il faut lancer la commande suivant pour installer viewpay

```cmd
>npm i viewpay
```

Après avoir terminé ceci, vous pouvez importer le composant Viewpay dans votre code reactJS.

```js 
import Viewpay from "viewpay/dist/Viewpay";
```
Si vous êtes sous typescritp, créer un fichier  Viewpay.d.ts  avec le contenu
```js
declare module 'viewpay/dist/Viewpay';
```

Vous pouvez actuelement utiliser le composant Viewpay.

Exemple d'utilisation
```js
import React from 'react';
import Viewpay from "viewpay/dist/Viewpay";

function App() {
  function complete_callback(){
    console.log("viewpay completed");
  }
  function existads_callback(){
    console.log("viewpay existeads");
  }
  function noads_callback(){
    console.log("viewpay noads");
  }

  return (
    <div className="App">
      <Viewpay siteId="1672e275c4ee7f34"
                 widthCadre="650px" heigthCadre="450px"
                 widthBtn="425px" heigthBtn="75px"
                 complete_callback={complete_callback}
                 existads_callback={existads_callback}
                 noads_callback={noads_callback}
            ></Viewpay>
    </div>
  )
}
export default App;
```
##Les parametres
*  siteId : l'id de l'éditeur (obligatoire)
*  widthCadre  : width du cadre souhaiter (valeur et utité css) (optional)
*  heigthCadre  : heigth du cadre souhaiter (valeur et utité css) (optional)
*  widthBtn  : width du bouton/loading viewpay souhaité  (optional)
*  heigthBtn  : heigth du bouton/loading viewpay souhaité  (optional)

*  complete_callback : fonction callback lorsque le parcours viewpay est terminé (utilisateur obtien la recompense) (optional)
*  existads_callback  : fonction callback lorsqu'une pub existe (optional)
*  noads_callback  : fonction callback lorsqu'une pub n'existe pas (optional)

Exemple dans codesandbox : https://codesandbox.io/s/gallant-shaw-owj1s?file=/src/App.js