DEV Community

Leo Kalshteyn
Leo Kalshteyn

Posted on

Grommet Intro

Grommet is another React component library that centers around modularity and accessibility for building mobile-first apps. One of its defining features is the ability to integrate it with existing projects as well as powerful theming tools for customizing components. Building and designing layouts for different screen displays quickly is quite simple with Grommet as well.

Installation for New Apps

After creating your app remove these files from the 'src' directory:

  • src/App.css
  • src/App.test.js
  • src/index.css
  • src/logo.svg

Inside src/index.js, remove the import of index.css.

import ReactDOM from 'react-dom';
import './index.css';  //Remove
import App from './App';
Enter fullscreen mode Exit fullscreen mode

Inside src/App.js, remove the logo and the import of app.css

import React from 'react';
import logo from './logo.svg'; //Remove
import './App.css'; //Remove

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />  //Remove
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Now Install Grommet

npm install grommet grommet-icons styled-components --save

Then add the import of the Grommet component.

import { Grommet } from 'grommet';

Usually, you should include Grommet only once as one of your top-level nodes.

Replace the main div with Grommet.

<div className="App"> // Remove
<Grommet plain> // Add
  <header className="App-header">
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
</Grommet> // Add
</div> // Remove  
Enter fullscreen mode Exit fullscreen mode

Now you can start customizing.

Installation for Existing Apps

First, install the packages

npm install grommet styled-components polished --save

Then add the import of the Grommet component.

import { Grommet } from 'grommet';

And now you replace the top-level nodes as in the previous main div example above.

Usage

To make use of Grommet's Box, first import it:

import { Box, Grommet } from 'grommet';

Create an AppBar component and replace the header tag with it.

const AppBar = (props) => (
  <Box
    tag='header'
    direction='row'
    align='center'
    justify='between'
    background='brand'
    pad={{ left: 'medium', right: 'small', vertical: 'small' }}
    elevation='medium'
    style={{ zIndex: '1' }}
    {...props}
  />
);

const App = () => {
  return (
    <Grommet theme={theme}>
      <AppBar>Hello Grommet!</AppBar>
    </Grommet>
  );
}
Enter fullscreen mode Exit fullscreen mode

Changing colors is done in the theme object

const theme = {
  global: {
+   colors: {
+     brand: '#228BE6',
+   },
    font: {
      family: 'Roboto',
      size: '18px',
      height: '20px',
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

Grommet also features the ability to easily declare context-aware colors which automatically adapt to light and dark themes. For example, use a light text color in a dark background, and vice-versa.

This is just a brief overview of Grommet and some of its features. On the official site, you can read more on visualizations, layouts, controls, and more.

References

Discussion (0)