Использование Grommet в приложениях React

За прошедшие годы экосистема React выросла за счет изобретения библиотек, которые помогают разрабатывать приложения React. В этом руководстве мы научимся использовать Grommet для разработки адаптивных, доступных и ориентированных на мобильные устройства компонентов для приложений React. Мы подробнее рассмотрим его основные концепции, некоторые варианты использования и создадим простой пример. Важно отметить, что Grommet имеет открытый исходный код и имеет 6,9 тыс. звезд на GitHub.

Этот учебник будет полезен читателям, которые заинтересованы в разработке адаптивных компонентов в своем приложении React с использованием Grommet. Эта статья требует базового понимания React и Styled-компонентов.

Что такое Громмет?

Grommet — это библиотека компонентов React, которая может похвастаться отзывчивыми и доступными компонентами кода для мобильных устройств. Он делает это с помощью своих компонентов, которые являются строительными блоками для библиотеки. Они включают в себя макеты, типы, цвета, элементы управления, входные данные, средства визуализации и утилиты. Все компоненты втулки встроены с учетом доступности и отзывчивости.

Grommet обеспечивает поддержку спецификации W3C, что делает его очень важным с точки зрения доступности. Он также предоставляет мощные темы и инструменты, которые позволяют настраивать цвет, тип, составные элементы и макет в соответствии с потребностями вашего проекта.

Некоторые популярные альтернативы Grommet включают tailwindcss и стилизованные компоненты, хотя они очень популярны среди разработчиков, каждый фреймворк отличается подходом к созданию приложений. Grommet ориентирован на мобильные устройства, доступен, отзывчив и имеет готовые темы, а также поддерживает W3C для простого создания приложений React, в то время как Tailwind CSS — это настраиваемая и полезная среда, которая позволяет разработчикам создавать приложения без ограничений CSS, таких как его каскадные правила. Styled-components призваны помочь разработчикам писать повторно используемые компоненты React, позволяя нам писать код CSS в нашем JavaScript с использованием литералов объектов, а также использовать компоненты в качестве низкоуровневой конструкции стиля.

В нашем проекте мы будем использовать Grommet из-за его настраиваемых компонентов, доступности и свойств темы, которые нам понадобятся по мере продвижения в этом руководстве.

Использование компонентов втулки

Grommet, как и многие другие библиотеки компонентов, поставляется с предварительно собранными компонентами для макетов и тем, такими как компоненты Box, Card и Header. Чтобы использовать сначала, вам нужно установить пакет втулки, используя NPM или пряжу, как блок кода ниже.

 npm i grommet styled-components

Или:

 yarn add grommet styled-components

Из приведенного выше видно, что мы также установили styled-components. Это связано с тем, что Grommet использует styled-components для настройки стилей в компонентах; желательно установить styled-components в свои проекты.

Чтобы использовать компонент Grommet в проекте React, вам необходимо импортировать grommet . Давайте создадим компонент карты ниже, чтобы объяснить:

 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> ); }

В приведенном выше блоке кода сначала импортировали Grommet и компонент Card из пакета grommet в ваш файл, а затем мы обернули наш компонент, используя импортированный компонент Card . Стили можно добавлять к компоненту Grommet в виде объектов, как мы сделали это с Button , или их можно стилизовать с помощью styled-components.

Давайте посмотрим больше примеров компонентов Grommet, взглянув на компоненты формы.

Почему Громмет?

Основная цель Grommet — улучшить опыт разработчиков и обеспечить более быстрый способ создания приложений React с его мобильными, доступными и отзывчивыми компонентами. Grommet плавно согласовывает дизайн и рабочий процесс разработчика, создавая беспроблемный опыт, что упрощает начало работы для всех.

Grommet также обеспечивает поддержку средств чтения с экрана из коробки, варианты темы, такие как темный режим, получаются из втулки из коробки, и их можно настроить с помощью themeMode в приложении React, как показано ниже.

 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;

В приведенном выше блоке кода мы используем свойство themeMode для добавления темного режима. Используя тернарный оператор, мы проверяем, находится ли страница в темном режиме, мы можем переключить ее в светлый режим, затем мы добавили кнопку для переключения между светлым и темным режимом в нашем приложении, вы можете проверить здесь демо на Codesandbox.

Grommet также может существовать с другими фреймворками и не добавляет глобальный стиль, который повлияет на существующие компоненты в вашем приложении React, функции и стили могут быть интерполированы в литерал объекта для стилей. Grommet также имеет компоненты макета, которые имеют некоторые свойства CSS, такие как flexbox, он также принимает все свойства flexbox в качестве реквизита.

Grommet имеет большую библиотеку иконок SVG, которые доступны с помощью компонента <Icon /> , в отличие от многих других фреймворков. В Grommet есть компоненты для визуализации данных, такие как гистограммы, карты и даже трекеры прогресса.

Сегодня несколько фирм используют Grommet для создания реальных приложений, включая Netflix, IBM, Sony, Samsung, Shopify, GitHub и Twilio.

Создание ценового компонента с втулкой

Теперь, когда мы знаем основы и основные концепции Grommet, мы собираемся создать ценовой компонент с использованием компонентов Grommet, в нем должны быть такие компоненты, как Card, Box и Buttons из библиотеки Grommet.

Без лишних слов, давайте начнем!

Настройка вашей среды

Во-первых, давайте создадим голое приложение React, напишите приведенный ниже блок кода на своем терминале.

 create-react-app grommet-app

Приведенный выше код создаст простое приложение React с помощью пакета create-react-app. Перейдите в каталог проекта.

 cd grommet-app

Далее необходимо установить зависимости, которые нам понадобятся в нашем проекте.

 yarn add grommet styled-components

Если вы сделали это, запустите сервер проекта с помощью приведенной ниже команды.

 yarn start

Для этого проекта нам понадобится один компонент для наших карточек и стиля с помощью styled-components.

Давайте создадим первую карту ниже

 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> </> ); }

В приведенном выше блоке кода мы используем компонент CardWrapper для упаковки всех наших компонентов Card , затем мы добавили новый компонент CardContent , который используется для упаковки всего нашего контента в каждом компоненте карты. Компонент CardButton — это компонент кнопки, который используется на картах на Grommet.

Далее давайте создадим стили для нашего приложения, используя styled-components. Запишите файл ниже:

 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; } `;

Выше мы определили объект стиля для нашего CardWrapper в нашем приложении. Давайте добавим объекты стиля для нашего компонента карты выше.

 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%; } `;

Давайте добавим больше стилей к нашим компонентам.

 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%; `;

После того, как мы все это сделали, наш проект должен выглядеть примерно так, как показано на рисунке ниже.

Нам нужно добавить больше карточек в наш компонент, используя приведенный ниже блок кода.

 <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> </> ); }

Здесь мы создали еще два компонента карты, добавив наши собственные пользовательские компоненты с помощью styled-components и использовали объекты стилей, которые мы определили выше, чтобы обернуть наши компоненты Grommet и улучшить стиль.

Наше приложение с картой окончательной цены должно выглядеть так, как показано на изображении ниже.

Использование втулки в производстве (приложение «Список зданий»)

Чтобы увидеть пример того, как будет выглядеть использование Grommet в другом приложении, мы собираемся создать простое приложение, которое позволит пользователю добавлять, просматривать и удалять элементы списка. Мы будем использовать встроенный React Context API для управления состоянием приложения, Grommet для наших компонентов пользовательского интерфейса и styled-components для стилизации нашего приложения.

Опять же, давайте инициализируем реагирующее приложение, используя приведенную ниже команду.

 create-react-app list-app

cd в каталог проекта

 cd list-app

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

В приведенном выше блоке кода мы установили:

Создание контекста приложения

В приложении нам нужно разделить данные пользователя между несколькими компонентами, для этого мы будем использовать Context API. Благодаря этому мы можем создать контекст приложения, в котором будут храниться списки и логика для нашего приложения. Вы можете прочитать эту статью, чтобы узнать больше о Context API.

Чтобы создать контекст нашего приложения, сначала создайте папку с именем context в каталоге src нашего приложения, затем создайте файл с именем AppContext.js , это будет файл для всего нашего контекста приложения, давайте сделаем это в блоке кода ниже:

 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); }

В приведенном выше блоке кода мы импортировали хук API контекста createContext и хук useState из React, используя компонент useState , мы создали центральное состояние для нашего приложения, это было сделано для того, чтобы компонент мог выступать в качестве поставщика контекста для других компоненты в нашем приложении. Затем мы создали новую переменную с именем removeList , которая принимает элемент в качестве параметра, с помощью оператора распространения мы распространяем то, что находится в состоянии, и объединяем объект, равный элементу, который мы хотим удалить.

Далее мы будем использовать приведенную выше логику для создания методов добавления и удаления элементов списка в нашем приложении, мы делаем это в блоке кода ниже:

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

Здесь мы возвращаем Context.Provider и принимаем дочерние свойства, мы делаем это, чтобы другой компонент мог получить доступ к свойствам, которые мы передаем в свойстве значения, мы инициализировали объект lists , чтобы принимать наши списки, метод addToList принимает параметр newItem для добавления новых списков в наше состояние приложения, а deleteFromList удаляет или удаляет элемент из хранилища списков.

Создание компонента списка

В этом разделе мы собираемся создать наш компонент List, используя Grommet для наших компонентов пользовательского интерфейса и styled-components для стилизации некоторых частей нашего пользовательского интерфейса. Сначала создайте папку компонентов внутри каталога src нашего приложения, затем внутри папки компонентов создайте новый файл List.js и внутри него напишите приведенный ниже код.

 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;

В приведенном выше коде мы сначала импортировали компоненты Card, CardBody, Box, Text и Button из люверса, затем мы создали компонент List для размещения реквизита, используя компоненты Grommet, мы создали компонент карты с кнопкой удаления, которая будет автоматически добавлена ​​в список. Далее нужно стилизовать наш компонент ниже:

 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; } `;

Как только мы сделаем это выше, наш компонент должен выглядеть как на изображении ниже.

Создание компонента отображения списка

Этот компонент отображает все добавленные нами списки, а также автоматически генерирует кнопку удаления, как только добавляется новый список.

 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;

В этом компоненте мы создали функцию ListDisplay и обернули ее, используя Context.Consumer из нашего компонента appContext , затем, используя div для нашего тега контейнера, мы деструктурировали методы list и deleteList из контекста приложения, сделав это, мы можем передать их в качестве реквизита. Затем мы сопоставляем lists , чтобы вернуть новый список, который мы можем использовать при создании единого списка, передав возвращенный объект в качестве реквизита компоненту List .

Наш компонент должен выглядеть так с добавленными списками:

Компонент NavBar

Этот компонент будет основной частью нашего приложения, здесь мы создадим наш компонент, используя Context.Consumer и, как и другие наши компоненты, мы будем стилизовать с помощью стилизованных компонентов для стилизации. Давайте создадим этот компонент ниже.

 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;

Во-первых, чтобы получить доступ к свойствам поставщика контекста приложения, мы обернули наш компонент в компонент Context.Consumer . Затем мы добавили тег заголовка из Heading , а затем создали форму ввода для добавления наших списков с помощью метода addToList , который принимает параметр значения (в нашем случае значение — это ввод пользователя). И последнее, но не менее важное: мы добавили кнопку «Отправить» для обработки отправки формы.

Если все сделано правильно, наше приложение должно выглядеть так:

Заключение

В этой статье мы узнали о Grommet, библиотеке компонентов, ориентированной на быстродействие и доступность. Мы также прошли процесс создания приложения компонента ценообразования с использованием Grommet и приложения списка. Получайте удовольствие, используя Grommet для вашего компонента и потребностей пользовательского интерфейса для вашего следующего приложения React. Код для приложения списка люверсов можно найти на Codesandbox, а компонент ценообразования можно найти здесь.

Ресурсы

• Документы по втулке
• Знакомство с Grommet
• Введение в контекстный API React