Questions tagged [grommet]

grommet tag is used to mark questions related to grommet framework

Grommet was created to give developers and designers alike access to tools that otherwise are out of reach of most product teams. Grommet’s goal is to assist in creating experiences that work across the many different interaction methods and screen sizes.

Grommet is structured to foster active communication between designers and developers in hopes of creating better user experience.

100 questions
1
vote
1 answer

Changing colorIndex of grommet components

How do i change the colorIndex of the the components in grommet like icons ,graphs,? Thanks in advance.
Rahul P
  • 33
  • 1
  • 5
1
vote
1 answer

Getting Grommet to work with webpack 2

I am trying to set up Grommet-standalone in my application. I just learnt custom properties in webpack config are no longer supported. so sassLoader doesn't work. I can't seem to get the alternative, webpack.LoaderOptionsPlugin, to work. This…
inginia
  • 412
  • 1
  • 6
  • 15
1
vote
0 answers

Force a mapStateToProps call in React

I'm building a react/redux app and using a ux library called Grommet in the front end. I have the app set up such that I have a series of forms contained within a set of accordions on the page. Here's a whittled downed version containing only one…
John Devitt
  • 690
  • 2
  • 8
  • 22
1
vote
0 answers

How to integrate mailchimp in a grommet.io form?

Looking to create an email signup form on a landing page. I'm using a react component library called Grommet (grommet.github.io). What does my onClick function need to be in order to capture the email using mailchimp?
user4210063
  • 21
  • 1
  • 2
0
votes
0 answers

React Page larger than screen size

I am developing a react application which is longer than the available screen size on mobile, thus not allowing a proper scroll to the bottom (there is always content below the end of the screen on mobile). This means that a user has to do another…
Enzo
  • 1
0
votes
1 answer

Grommet Starter has Errors with hot-update.js

I'm working through the starter example for Grommet and hitting this error when I add in the tag: defaultValidatorFn is not a function TypeError: defaultValidatorFn is not a function at shouldForwardProp…
ngreen
  • 1,559
  • 13
  • 22
0
votes
0 answers

Grommet v2 `List` raise an error when used with next.js v13 app router

Description We are using Next.js v13 app router with Grommet v2. We are using tsx as our file extention. We are using the List element with children. Code // page.tsx 'use client'; import { Grommet, Text, Box, List } from 'grommet'; export…
Jim Jin
  • 1,249
  • 1
  • 15
  • 28
0
votes
1 answer

How to handle arrays in a Grommet DataTable?

I'm trying to use arrays in Grommet DataTable. My data looks like this : { customer: [ 'BANANA', 'Banana', 'banana', 'republic of banana' ], somethingelse: ['ABC','123','DEF'] } In a regular Grommet Table…
zlobul
  • 335
  • 1
  • 5
  • 20
0
votes
0 answers

React: Grommet grid only responsive up to three columns

I am using Grommet to build a dashboard with . If using three columns, responsive behaviour is as expected when the window is made smaller: But if using four columns there is no breakpoint at which the cards stack on top of each other: The…
Lone Wallaby
  • 159
  • 1
  • 1
  • 9
0
votes
1 answer

Scrolling issue on mobile

I have a problem with scrolling on mobile. Generally, imagine a page which has a height more than 100vh (i.e. it needs to be scrolled). When on mobile the scroller does not show until you try scrolling very gently. Otherwise the content gets…
yavorbel
  • 4,061
  • 2
  • 6
  • 7
0
votes
0 answers

Lists with Children in Grommet UI and TypeScript

I've got the following list in a Grommet UI component: import { List } from "grommet"; import { ResourceLink, ResourceLinkProps } from "./ResourceLink"; type ResourceListProps = { resources: ResourceLinkProps[], } const ResourceList:…
hammygoonan
  • 2,125
  • 2
  • 21
  • 36
0
votes
1 answer

Grommet ResponsiveContext : custom breakpoints not making text smaller when screen size reduced

I'm working on a web application and I'm using react in the frontend with grommet ui library for design .. I want to make my web application responsive but when I use ResponsiveContext and add breakpoints values I still get the same text size when I…
0
votes
1 answer

Is there a way to add new fetched elements to an existing state array in React?

I'm currently building a tool which loads videos and shows them with a thumbnail. As soon as I reach the end of the scrollable view, I want the next 40 items to be fetched and added to the existing array. I'm using Grommet's InfiniteScroll for this.…
0
votes
1 answer

Maximum update depth exceeded React when using Grommet Chart component

I am getting the following error: Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent…
0
votes
1 answer

Grommet DataTable Only allow Single select

Does Grommet have a built in solution to only allow single or multiple selections within a dataTable? I came up with this useState function that clears the array before setting it but it has an adverse reaction of forcing the user to click twice. If…
tron_jones
  • 199
  • 1
  • 12