Grommet
An introduction to building a React app with Grommet
I jump at every chance to incorporate styling into a project. Now that the time has come to build a full-scale React application as a junior developer, that excitement for styling is still very much alive and well. While in the process of discovering React UI libraries to incorporate into my team’s app, I came across a pretty recently created UI library known as Grommet.
Grommet, citing itself as a “react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package,” has very sleek, modern-looking components that anyone can incorporate into an existing React project.
If you would like to get your feet wet before taking the full plunge, Grommet also has a starter application that you can load into your browser and play around with to understand the functionality of a few components including a Grommet Box and a Grommet Button
In terms of installing and using Grommet, the process is fairly straightforward:
- Once inside of your React app in your terminal, run the below command to install Grommet’s packages:
npm install grommet grommet-icons styled-components --save2. Next, choose the .js file(s) that you want to import Grommet into:
import React, { Component } from 'react';
+ import { Grommet } from 'grommet';To note: While experimenting with Grommet, I noticed that Grommet needs to be imported at the top of each file you intend to use it with. When I attempted to import it to my parent component (i.e. App.js), Grommet was not then available to all of the App file’s children. This may or may not seem obvious / this could change over time.
3. Grommet should also be included in a top-level node in whichever component you utilize it in, in order to be able to have it function properly. Here’s some sample code from Grommet’s starter app page to demonstrate:
4. You can set up your styling to accompany the Grommet tags with a declaration such as the below, above your function that renders the JSX elements (in the components where you’ve imported Grommet), if you don’t want to/do not yet know how to set up a css loader to parse your css files. In that case, you would put the styling below into that separate file.
This theme will propagate to all components under this given Grommet instance. However, Grommet notes that if you are working with another library such as Material UI, that is already setting styles in tags with its own typography, Grommet will not be able to affect those styles. However, what is nice about this note is the point that Grommet CAN work with other libraries. I have yet to explore the extent of this.
5. For ANY of the Grommet components that you wish to use, you’ll need to import them at the top of your chosen .js file as in the below:
- import { Grommet } from 'grommet';
+ import { Box, Grommet } from 'grommet';Lastly, there are some further tools that can help you when you’re experimenting with various components:
a) Storybook: This essentially illustrates how all of the Grommet components work, and while not real application scenarios, will help you get a feel for how the components work
b) Grommet Sandbox: The Sandbox Editor allows you to play with the components and their functionality, although again, these do not have real app scenarios. This way, once you have a component working way you envision in Sandbox, I find it easier to then implement it into my app.
c) Grommet slack: Grommet happily invites all users to join its slack so that you can post any questions you may have about using Grommet.
While this is only an introduction to Grommet (I’m learning right along with you!), I’m excited to see the evolution of Grommet and to use it again for future applications.
Happy styling!