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, you can read more on visualizations, layouts, controls, and more.
References
Top comments (0)