Grommet Intro
Tags: react
Published: 2021-01-05 23:57:53


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

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

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

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

Changing colors is done in the theme object

```
const theme = {
  global: {
+   colors: {
+     brand: '#228BE6',
+   },
    font: {
      family: 'Roboto',
      size: '18px',
      height: '20px',
    },
  },
};
```
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](https://v2.grommet.io/), you can read more on visualizations, layouts, controls, and more.

**References**

- https://v2.grommet.io/
- https://github.com/grommet/grommet-starter-new-app
- https://github.com/grommet/grommet-starter-existing-app