We are now creating style for our application with the help of a styled component.
How to use Grommet library in React Application
React Native has many libraries to simplify the process. Among the famous libraries, Grommet helps in developing accessible, responsive and mobile-first components for React apps. Thus this library also stands in the list of popular libraries of React Native. Grommet is open-source which makes it quite popular among react native developers.
Grommet – An introduction
Grommet is a React component library that is often used for accessible and responsive mobile-first code components. It has been around since 2016. It is an open-source development tool. The main advantage of this library is the ability to reuse UI components.
There is also a starter application that users could load into the browser. This will help understand the component functionality like GrommetButton and Grommet Box.
The main goal of Grommet is to reduce the gap of communication between designer and developer. It simply makes the process of design and development agile and easier. Let’s explore some more advantages of Grommet.
Need of Grommet
The main purpose of Grommet is to improve the react developer’s experience. This is done with the faster way of React application development. In this responsive component, accessibility is also considered.
It provides a seamless experience that makes it simple to work. It is as easy that anyone can get started.
Grommet also supports customization. Some powerful tools and themes enable the customization of type, colour, layout and component elements as per the project need.
One of the prime advantages of Grommet is the support for W3C for the easy development of React applications.
Support for screen readers out of the box is also what Grommet provides.
Also read: How to extend react admin and its need
How to Use Grommet Library
Like so many other components this library comes pre-built along with some components for themes like Card, box and header component. Grommet is always needed to be imported at the top of every file that you have to use.
To use Grommet, you need to run the below command to install Grommet’s packages. This is done with the use of NPM or yarn like code.
npm install grommet grommet-icons styled-components --save It is always advisable to install a styled component because for customizing styles Grommet always uses a styled component.
To use Grommet, we need to import it. So the next step is to choose the .js file(s) that you want to import Grommet.
Import React, {component} from ‘react’;
Import {Grommet, Card} from ‘grommet’ ;
Export default function GrommetExample() {
Return (
<card>
<CardBody pad=”medium”>Body</CardBody>
<Button
icon={<Icons.Favorite color=”red”>}
hoverInidicator
/>
</Card>
);
} We have first imported Grommet and later on Card components from the grommet package into the file. With the help of the Card component, we will wrap our component. The styles will be added to the Grommet component as an object.
Creating a bare React Application with Grommet as follow
Create-react-app grommet-app This code will create the bare React app with the use of create-react app package.
cd grommet-app The further step will be installing of dependencies like this
Yarn add grommet styled-components
Yarn start To create the card we need to write following code
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>
</>
);
} Here we have used the CardWrapper component to wrap all of the card components. Later on, we have added a new component called CardContent that wraps all of the content present in each card component. The button component is a CardButton component used on the Grommet.
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;
}
; Here we have defined a style object for our CardWrapper in the application. Now we will add style objects for our Card component.
const Card = styled.div`
min-width: 380px;
box-shadow: 3px -2px 19px 0px rgba(40, 40, 40, 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%;
}
`;
Let's add more styles to the component
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%;
`; Let’s take another example of building a list app
To see an example of what it would look like using Grommet in another app. We are also going to build a simple application that will allow a user to add.
We will be using the in-built React Context API to manage the state application.
Let’s initialize the react app with the help of the following command
Create-react-app list-app Cd into the project directory
cd list-app Yarn add grommet-controls grommet-icons styled-components
Also read: How to build react admin panel using react
Building the App Context
In the application, the user’s data are shared across multiple components. So here we can create an App Context that will hold the list and logic for the app. We first need to create a folder for creating the app context. Here we are creating and naming that folder Context in the src directory. The next will be creating a file called the AppContext.js file.
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);
} Here we have imported the context API hook called createContext and the useState hook.
Final Verdict
Well, Grommet is simple to use and one of the best React Native Libraries. We have shared the information to let you know something more about this library. Use this library and have fun with coding. If then also something is left, then kindly share your comments with us. Moreover, to hire a React Native developer, get in touch with the leading mobile app development firm.
