🚀 Commencer

Vous avez fait l'excellent choix de notre librairie pour votre projet React ? Excellente nouvelle, y'a plus qu'à !

Installation de PayGreen UI

PayGreen UI est disponible en npm package :

npm install --save @paygreen/paygreen-ui

yarn add @paygreen/paygreen-ui

Installer un Normalize

Pour fixer les comportements CSS différents selon les navigateurs (et effectuer certains resets utiles), nous vous conseillons d'installer styled-normalize :

npm install --save styled-normalize

yarn add styled-normalize

Définir les styles par défaut

Pour un rendu CSS optimal des composants, nous vous recommandons vivement de créer un GlobalStyle :

import { createGlobalStyle, css } from 'styled-components';

import { normalize } from 'styled-normalize';

import { ResetStyle, CssClasses } from '@paygreen/paygreen-ui';

const CustomCss = css``;

const GlobalStyle = createGlobalStyle`

${normalize};

${ResetStyle};

${CssClasses};

${CustomCss};

`;

• Le normalize est celui installé dans l'étape précédente.
• Le ResetStyle comprend des resets utiles pour nos composants (en plus de ceux du Normalize conseillé ci-dessus).
• Le CssClasses contient des classes CSS permettant de masquer des contenus en fonction de la taille de l'écran. Elles sont utilisées dans certains composants.
• Le CustomCss contient votre CSS personnalisé. Nous vous conseillons par exemple le nôtre :

html {

scroll-behavior: smooth; /* Pour avoir un défilement smooth au clic sur les ancres */

}

body {

font-family: 'Open Sans', sans-serif; /* Renseignez votre police */

font-size: 1.8rem; /* Choisissez votre taille par défaut : 1.8rem correspond à 18px grâce au ResetStyle */

}

Ajouter une police personnalisée

Nous utilisons sur PayGreen UI la police Open Sans, mais vous pouvez tout aussi bien utiliser n'importe quelle autre fonte (à condition de la renseigner dans le font-family ci-dessus). Vous pouvez par exemple créer un fichier font.css et y intégrer un import Google Font :

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

Utiliser la librairie UI dans mon application React

Vous aurez besoin du PGThemeProvider (qui permet de passer le thème à l'ensemble de ses enfants, ce qui est indispensable pour nos composants), du GlobalStyle et du font.css définis précédemment, ce qui donnerait par exemple (ici avec notre composant UI Toggle) :

import React from 'react';

import ReactDOM from 'react-dom';

import { PGThemeProvider, ThemeDefault, Toggle } from '@paygreen/paygreen-ui';

import './style/font.css'; // votre import de font

import { GlobalStyle } from './style/GlobalStyle'; // le fichier créé précédemment

const App = () => (

<PGThemeProvider theme={ThemeDefault}>

<GlobalStyle />

<Toggle id="toggle" />

</PGThemeProvider>

);

ReactDOM.render(<App />, document.getElementById('root'));

Ce qui donne :

---

Tout fonctionne ? Great, le plus dur est fait, félicitations ! 🎉 À présent, vous pouvez intégrer les composants de votre choix en vous fiant à leur doc individuelle. Force et honneur ! 💪