Utilisation de Grommet dans les applications React

Au fil des ans, l'écosystème React s'est développé avec l'invention de bibliothèques qui aident au développement d'applications React. Dans ce didacticiel, nous allons apprendre à utiliser Grommet pour développer des composants réactifs, accessibles et mobiles pour les applications React. Nous allons examiner de plus près ses concepts de base, certains de ses cas d'utilisation et créer un exemple simple. Il est important de noter que Grommet est open-source avec 6,9k étoiles sur GitHub.

Ce didacticiel sera utile aux lecteurs intéressés par le développement de composants réactifs dans leur application React à l'aide de Grommet. Cet article nécessite une compréhension de base des composants React et Styled.

Qu'est-ce qu'un œillet ?

Grommet est une bibliothèque de composants React qui se vante de composants de code mobiles réactifs et accessibles. Il le fait à travers ses composants - qui sont les éléments constitutifs de la bibliothèque. Ils incluent les mises en page, les types, les couleurs, les contrôles, les entrées, les visualisations, les médias et les utilitaires. Tous les composants de l'œillet sont intégrés dans un souci d'accessibilité et de réactivité.

Grommet prend en charge les spécifications du W3C, ce qui lui permet de marquer un énorme point en termes d'accessibilité. Il fournit également des thèmes et des outils puissants qui vous permettent de personnaliser la couleur, le type, les éléments de composant et les besoins de mise en page en fonction des besoins de votre projet.

Certaines alternatives populaires à Grommet incluent tailwindcss et des composants stylés, bien que très populaires parmi les développeurs, chaque framework diffère par son approche dans la création d'applications. Grommet est mobile d'abord, accessible, réactif et des thèmes prêts à l'emploi et prend en charge le W3C pour une création facile d'applications React tandis que Tailwind CSS est un cadre hautement personnalisable et utilitaire qui permet aux développeurs de créer des applications sans les restrictions de CSS telles que son règles en cascade. Les composants stylés visent à aider les développeurs à écrire des composants React réutilisables en nous permettant d'écrire du code CSS dans notre JavaScript à l'aide de littéraux d'objet et il utilise également des composants comme construction de style de bas niveau.

Dans notre projet, nous utiliserons Grommet dans nos projets en raison de ses composants personnalisables, de son accessibilité et de ses propriétés de thème dont nous aurions besoin au fur et à mesure que nous avancerons dans ce didacticiel.

Utilisation de composants à œillets

Grommet, comme tant d'autres bibliothèques de composants, est pré-construit avec certains composants pour les mises en page et les thèmes tels que les composants Box, Card et Header. Pour l'utiliser, vous devez d'abord installer le package d'œillets à l'aide de NPM ou de fil, comme le bloc de code ci-dessous.

 npm i grommet styled-components

Ou:

 yarn add grommet styled-components

De ce qui précède, vous pouvez voir que nous avons également installé des composants de style. En effet, Grommet utilise des composants stylés pour personnaliser les styles dans les composants. il est conseillé d'installer des composants de style dans vos projets.

Pour utiliser un composant Grommet dans un projet React, vous devez importer grommet . Construisons un composant de carte ci-dessous pour expliquer :

 import React from 'react'; import { Grommet, Card } from 'grommet'; export default function GrommetExample() { return ( <Card> <CardBody pad="medium">Body</CardBody> <Button icon={<Icons.Favorite color="red" />} hoverIndicator /> </Card> ); }

Dans le bloc de code ci-dessus, nous avons d'abord importé Grommet et le composant Card du package grommet dans votre fichier, puis nous avons enveloppé notre composant à l'aide du composant Card que nous avons importé. Les styles peuvent être ajoutés à un composant Grommet en tant qu'objets comme nous l'avons fait pour le Button ou ils peuvent être stylisés à l'aide de composants stylés.

Voyons plus d'exemples de composants Grommet en examinant les composants Form.

Pourquoi Grommet ?

L'objectif principal de Grommet est d'améliorer l'expérience des développeurs et de créer un moyen plus rapide de créer des applications React avec ses composants mobiles, accessibles et réactifs. Grommet aligne de manière transparente une conception et un flux de travail de développeur pour créer une expérience transparente, ce qui permet à quiconque de démarrer très facilement.

Grommet prend également en charge les lecteurs d'écran prêts à l'emploi, des variantes de thème telles que le mode sombre sont obtenues à partir de l'œillet prêt à l'emploi et elles peuvent être configurées à l'aide de l'accessoire themeMode dans une application React, comme ci-dessous.

 import React from "react"; import { Grommet, Box, Button, Heading, dark } from "grommet"; import { grommet } from "grommet"; const App = () => { const [darkMode, setDarkMode] = React.useState(false); return ( <Grommet full theme={grommet} themeMode={darkMode ? "dark" : "light"}> <Box pad="large"> <Heading level="1">Grommet Darkmode toggle</Heading> <Button label="Toggle Theme" primary alignSelf="center" margin="large" onClick={() => setDarkMode(!darkMode)} /> </Box> </Grommet> ); }; export default App;

Dans le bloc de code ci-dessus, nous utilisons la propriété themeMode pour ajouter un mode sombre. À l'aide d'un opérateur ternaire, nous vérifions si la page est en mode sombre, nous pouvons la basculer en mode clair, ensuite nous avons ajouté un bouton pour basculer entre le mode clair et le mode sombre sur notre application, vous pouvez vérifier ici pour une démo sur Codesandbox.

Grommet peut également exister avec d'autres frameworks et n'ajoute pas de style global qui affectera les composants existants dans votre application React, les fonctions et les styles peuvent être interpolés dans un littéral d'objet pour les styles. Grommet comporte également des composants de mise en page, qui comportent certaines propriétés CSS telles que flexbox, il prend également toutes les propriétés flexbox en tant qu'accessoires.

Grommet propose une grande bibliothèque d'icônes SVG accessibles à l'aide du composant <Icon /> , contrairement à de nombreux autres frameworks. Grommet comprend des composants pour la visualisation des données tels que des graphiques à barres, des cartes et même des suivis de progression.

Plusieurs entreprises utilisent aujourd'hui Grommet pour créer des applications du monde réel, notamment Netflix, IBM, Sony, Samsung, Shopify, GitHub et Twilio.

Construire un composant de tarification avec Grommet

Maintenant que nous connaissons les bases et les concepts de base de Grommet, nous allons créer un composant de tarification à l'aide de composants Grommet. Il devrait comporter des composants tels que Card, Box et Buttons de la bibliothèque Grommet.

Sans plus tarder, commençons !

Configuration de votre environnement

Commençons par créer une application React nue, écrivons le bloc de code ci-dessous sur votre terminal.

 create-react-app grommet-app

Le code ci-dessus créera une application React nue à l'aide du package create-react-app. Déplacez-vous dans le répertoire du projet.

 cd grommet-app

Ensuite, installez les dépendances dont nous aurions besoin dans notre projet.

 yarn add grommet styled-components

Si vous l'avez fait, démarrez le serveur de projet à l'aide de la commande ci-dessous.

 yarn start

Pour ce projet, nous aurions besoin d'un seul composant pour nos cartes et style avec des composants stylés.

Créons la première carte ci-dessous

 import React from "react"; import styled from "styled-components"; export default function GrommetCard() { return ( <> <CardWrapper> <Card left> <Div> <Div> <CardContent> <small>Basic</small> <h1>$588</h1> </CardContent> <CardContent> <p>500 GB storage</p> </CardContent> <CardContent> <p>2 Users Allowed</p> </CardContent> <CardContent> <p>Send Up To 3 GB</p> </CardContent> </Div> <CardButton secondary>LEARN MORE</CardButton> </Div> </Card> </CardWrapper> </> ); }

Dans le bloc de code ci-dessus, nous utilisons le composant CardWrapper pour encapsuler tous nos composants de Card , puis nous avons ajouté un nouveau composant, CardContent , qui est utilisé pour encapsuler tout notre contenu dans chaque composant de carte. Le composant CardButton est un composant bouton qui est utilisé sur les cartes sur Grommet.

Ensuite, créons des styles pour notre application en utilisant des composants de style. Écrivez le fichier ci-dessous :

 const primaryGradient = "linear-gradient(hsl(236, 72%, 79%), hsl(237, 63%, 64%))"; const CardWrapper = styled.div` display: flex; justify-content: center; align-items: center; height: max-content; margin: 20px; @media all and (max-width: 1240px) { flex-direction: column; } `;

Dans ce qui précède, nous avons défini un objet de style pour notre CardWrapper dans notre application. Ajoutons des objets de style pour notre composant Card ci-dessus.

 const Card = styled.div` min-width: 380px; box-shadow: 3px -2px 19px 0px rgba(50, 50, 50, 0.51); border-radius: ${(props) => (props.left ? " 6px 0 0 6px" : props.right ? "0 6px 6px 0" : "6px")}; background: ${(props) => (props.secondary === undefined ? "#fff" : primaryGradient)}; padding: 25px 20px; height: ${(props) => (props.center ? "520px" : "480px")}; display: flex; justify-content: center; align-items: center; @media all and (max-width: 1240px) { margin-bottom: 20px; border-radius: 6px; height: 480px; } @media all and (max-width: 420px) { min-width: 90%; } `;

Ajoutons plus de styles à nos composants.

 const CardButton = styled.div` min-width: 100%; padding: 10px 15px; min-height: 50px; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.2); color: ${(props) => (props.secondary !== undefined ? "#fff" : "#7c7ee3")}; background: ${(props) => (props.secondary === undefined ? "#fff" : primaryGradient)}; text-align: center; margin-top: 25px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; border-radius: 6px; `; const CardContent = styled.div` width: 100%; color: ${(props) => (props.secondary !== undefined ? "#fff" : "#000")}; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1.3px solid #eee; text-align: center; `; const Div = styled.div` min-width: 100%; `;

Une fois que nous avons fait tout cela, notre projet devrait ressembler à l'image ci-dessous.

Nous devons ajouter plus de cartes à notre composant en utilisant le bloc de code ci-dessous.

 <Card center secondary> <Div> <Div> <CardContent secondary> <small>Premium</small> <h1>$788</h1> </CardContent> <CardContent secondary> <p>75 GB storage</p> </CardContent> <CardContent secondary> <p>4 Users Allowed</p> </CardContent> <CardContent secondary> <p>Send Up To 5 GB</p> </CardContent> </Div> <CardButton>LEARN MORE</CardButton> </Div> </Card> <Card right> <Div> <Div> <CardContent> <small>PRO</small> <h1>$1000</h1> </CardContent> <CardContent> <p>1TB storage</p> </CardContent> <CardContent> <p>Unlimited Users Allowed</p> </CardContent> <CardContent> <p>Send Up To 10 GB</p> </CardContent> </Div> <CardButton secondary>LEARN MORE</CardButton> </Div> </Card> </CardWrapper> </> ); }

Ici, nous avons créé deux autres composants de carte, en ajoutant nos propres composants personnalisés avec des composants de style et avons utilisé les objets de style que nous avons définis ci-dessus pour envelopper nos composants Grommet et améliorer le style.

Notre application de carte de prix finale devrait ressembler à l'image ci-dessous.

Utilisation de Grommet en production (application de liste de construction)

Pour voir un exemple de ce à quoi cela ressemblerait d'utiliser Grommet dans une autre application, nous allons créer une application simple qui permettra à un utilisateur d'ajouter, d'afficher et de supprimer des éléments de liste. Nous utiliserons l'API React Context intégrée pour gérer l'état de l'application, Grommet pour nos composants d'interface utilisateur et les composants stylés pour styliser notre application.

Encore une fois, initialisons une application de réaction à l'aide de la commande ci-dessous.

 create-react-app list-app

cd dans le répertoire du projet

 cd list-app

 yarn add grommet grommet-controls grommet-icons styled-components

Dans le bloc de code ci-dessus, nous avons installé :

Construire le contexte de l'application

Dans l'application, nous devons partager les données de l'utilisateur sur plusieurs composants, pour y parvenir, nous utiliserions l'API Context. Avec cela, nous pouvons créer un contexte d'application qui contiendrait les listes et la logique de notre application. Vous pouvez consulter cet article pour en savoir plus sur l'API Context.

Pour créer notre contexte d'application, créez d'abord un dossier appelé context dans le répertoire src de notre application, créez ensuite un fichier appelé AppContext.js ce sera le fichier pour tout notre contexte d'application, faisons cela dans le bloc de code ci-dessous :

 import React, { createContext, useState } from 'react'; export const Context = createContext(); const AppContext = ({children}) => { const [lists, setLists] = useState([]); const removeList = item => { let newLists = [...lists]; lists.map((list, id) => { return list === item && newLists.splice(id, 1); }); setLists(newLists); }

Dans le bloc de code ci-dessus, nous avons importé le hook d'API de contexte createContext et le hook useState all de React, en utilisant le composant useState , nous avons créé un état central pour notre application, cela a été fait pour que le composant puisse agir comme un fournisseur de contexte pour d'autres composants de notre application. Ensuite, nous avons créé une nouvelle variable nommée removeList qui prend un élément en tant que paramètre, en utilisant l'opérateur de propagation, nous étalons ce qui est dans l'état et épissons l'objet qui est égal à l'élément que nous voulons supprimer.

Ensuite, nous utiliserons la logique ci-dessus pour créer des méthodes permettant d'ajouter et de supprimer des éléments de liste dans notre application, nous le faisons dans le bloc de code ci-dessous :

 return ( <Context.Provider value={{ lists, addToLists: (newItem) => setLists([...lists, newItem]), deleteFromList: (item) => removeList(item) }}> {children} </Context.Provider> ) } export default AppContext;

Ici, nous renvoyons le Context.Provider et acceptons les accessoires enfants, nous le faisons pour que les autres composants puissent accéder aux propriétés que nous passons dans la valeur prop, nous avons initialisé l'objet lists à prendre dans nos listes, la méthode addToList prend un paramètre newItem pour ajouter de nouvelles listes à notre état d'application et le deleteFromList supprime ou supprime un élément du magasin de listes.

Construire le composant de liste

Dans cette section, nous allons créer notre composant List en utilisant Grommet pour nos composants d'interface utilisateur et des composants de style pour styliser certaines parties de notre interface utilisateur. Tout d'abord, créez un dossier de composants dans notre répertoire src d'application, puis dans le dossier de composants, créez un nouveau fichier List.js et à l'intérieur, écrivez le code ci-dessous.

 import React from "react"; import styled from "styled-components"; import { Card, CardBody, Box, Text, Button } from "grommet"; function List(props) { return ( <StyledDiv> <Card> <CardBody className="card_body"> <Box direction="row" className="item_box"> <Text className="text">{props.list}</Text> <Box className="button_box"> <Button onClick={props.deleteList.bind(this, props.list)} className="button" > Delete </Button> </Box> </Box> </CardBody> </Card> </StyledDiv> ); } export default List;

Dans le code ci-dessus, nous avons d'abord importé les composants Card, CardBody, Box, Text et Button du grommet, puis nous avons créé un composant List pour intégrer les accessoires. En utilisant les composants Grommet, nous avons créé un composant de carte avec un bouton de suppression qui sera automatiquement ajouté à une liste. Ensuite, stylisez notre composant ci-dessous :

 const StyledDiv = styled.div` .button { background-color: #8b0000; color: white; padding: 10px; border-radius: 5px; } .card_body { padding: 20px; margin-top: 20px; } .item_box { justify-content: space-between; } .text { margin-top: auto; margin-bottom: auto; } `;

Une fois que nous avons fait ce qui précède, notre composant devrait ressembler à l'image ci-dessous.

Construire le composant d'affichage de liste

Ce composant affiche toutes les listes que nous avons ajoutées et génère également automatiquement un bouton de suppression dès qu'une nouvelle liste est ajoutée.

 import React from "react"; import List from "./List"; import { Context } from '../context/AppContext'; function ListDisplay() { return ( <Context.Consumer> {(context) => ( <div className="container"> {context.lists.length ? context.lists.map((list, id) => ( <List key={id} list={list} deleteList={context.deleteFromList} /> )) : null } </div> )} </Context.Consumer> ); } export default ListDisplay;

Dans ce composant, nous avons créé une fonction ListDisplay et l'avons enveloppée à l'aide de Context.Consumer de notre composant appContext , puis en utilisant une div pour notre balise de conteneur, nous avons déstructuré la list et les méthodes deleteList du contexte de l'application, en faisant cela, nous pouvons être en mesure pour les faire passer pour des accessoires. Ensuite, nous mappons les lists pour renvoyer une nouvelle liste, que nous pouvons utiliser pour créer une seule liste en transmettant l'objet renvoyé en tant qu'accessoires au composant List .

Notre composant devrait ressembler à ceci avec des listes ajoutées :

Composant de la barre de navigation

Ce composant sera l'essentiel de notre application, ici nous allons utiliser notre composant en utilisant Context.Consumer et similaire à nos autres composants, nous allons styliser avec des composants stylés pour le style. Construisons ce composant ci-dessous.

 import React, { useState } from "react"; import { Heading, Form, TextInput, Button } from "grommet"; import styled from "styled-components"; import { Context } from '../context/AppContext'; function Navbar() { const [value, setValue] = useState(""); return ( <Context.Consumer> {store => ( <StyledDiv className="container"> <Heading className="title">Grommet List App</Heading> <Form onSubmit={() => store.addToLists(value)} className="form-group"> <TextInput className="form" value={value} type="text" onChange={(e) => setValue(e.target.value)} placeholder="Enter item" /> <Button type='submit' className="button">Add to List</Button> </Form> </StyledDiv> )} </Context.Consumer> ); } const StyledDiv = styled.div` .button { margin-top: 10px; background-color: purple; color: white; padding: 10px; border-radius: 5px; } `; export default Navbar;

Tout d'abord, afin d'accéder aux propriétés du fournisseur de contexte d'application, nous avons enveloppé notre composant dans un composant Context.Consumer . Ensuite, nous avons ajouté une balise Heading de Grommet, puis nous avons créé un formulaire de saisie pour ajouter nos listes en utilisant la méthode addToList qui prend un paramètre de valeur (dans notre cas, la valeur est l'entrée de l'utilisateur). Enfin, nous avons ajouté un bouton Soumettre pour gérer la soumission du formulaire.

Une fois fait correctement, notre application devrait ressembler à ceci :

Conclusion

Dans cet article, nous avons découvert Grommet, une bibliothèque de composants axée sur la réactivité et l'accessibilité. Nous avons également traversé le processus de création d'une application de composant de tarification à l'aide de Grommet et d'une application de liste. Amusez-vous à utiliser Grommet pour vos besoins en composants et en interface utilisateur pour votre prochaine application React. Le code de l'application Grommet list peut être trouvé sur Codesandbox et le composant de tarification peut être trouvé ici.

Ressources

• Documents sur les œillets
• Une introduction à Grommet
• Introduction à l'API de contexte de React