Questions tagged [grommet]

grommet tag is used to mark questions related to grommet framework

Filter by
Sorted by
Tagged with
0 votes
0 answers
9 views

Custom Grommet TextArea not changing rows prop on initial input

I have created the a custom Grommet TextArea component, with the idea of it having the ability to change its rows prop based on the input. In the current usage it is also autopopulated on form load. ...
Nick's user avatar
  • 1
1 vote
0 answers
23 views

Unable to collect styled-component styleTags with server-side rendering

I try to collect the styleTags of a grommet.io page in order to use them for server-side-rendering with client hydration. I use ServerStyleSheet() as described here: https://styled-components.com/docs/...
don's user avatar
  • 21
0 votes
0 answers
30 views

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 ...
Enzo's user avatar
  • 1
3 votes
1 answer
491 views

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 <AppBar> tag: defaultValidatorFn is not a function TypeError: defaultValidatorFn is not a function ...
ngreen's user avatar
  • 1,649
1 vote
2 answers
60 views

How to make a H5 pan control in pure css?

We build this web control to send commands to IPC(IP Camera). Then the IPC could rotate. It's a web component and I don't know the name. It looks like this: When the mouse hovers on one of the ...
Jim Jin's user avatar
  • 1,279
0 votes
0 answers
45 views

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 { ...
Jim Jin's user avatar
  • 1,279
0 votes
1 answer
126 views

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: [...
zlobul's user avatar
  • 335
0 votes
0 answers
86 views

React: Grommet grid only responsive up to three columns

I am using Grommet to build a dashboard with <Grid>. If using three columns, responsive behaviour is as expected when the window is made smaller: But if using four columns there is no ...
Lone Wallaby 's user avatar
0 votes
1 answer
263 views

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 ...
yavorbel's user avatar
  • 4,771
0 votes
0 answers
119 views

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 = { ...
hammygoonan's user avatar
  • 2,125
1 vote
0 answers
170 views

Testing Grommet UI Compents with Jest in a NextJS project

I've got a NextJS project that uses Grommet UI. When I try and test it using Jest I get the following error: TypeError: Cannot read properties of undefined (reading 'pageHeader') (see full stack trace ...
hammygoonan's user avatar
  • 2,125
2 votes
0 answers
825 views

.env variables in Next.js are of type string | undefined? I am trying to pass them as a string and keep getting a type error

I am using Next.js 12.1.5 to build a website, the client wants the form responses on the website to be sent directly to her email, so I am using a library EmailJS. EmailJS has a send method to send ...
Ryan Speciale's user avatar
0 votes
1 answer
281 views

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 ...
CodeLearner's user avatar
0 votes
1 answer
35 views

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 ...
silasmartin's user avatar
1 vote
0 answers
57 views

onSubmit validation toggles between true and false in the validationResults when it shouldn't

It seems to record the entry fields correctly but when submitting, it returns true and then false upon attempting to submit again. Screenshot showcasing the issue. I changed the onSubmit to ({ value }...
CoderNumber10002's user avatar
2 votes
0 answers
171 views

How to replace Mapbox default popup with customized information

I am kind of new to ReactJS and am working on a project that displays markers at different points, with the data being received from a JSON file. Currently, I am using popups to display information ...
TheIlluminadi's user avatar
0 votes
1 answer
340 views

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 ...
Jack McKay Fletcher's user avatar
1 vote
2 answers
235 views

Loop function inside html in javascript (React) [duplicate]

I want to loop over my function SliderComponent, with different inputs, inside the Html in order to create several components. I found this solution online where we build string and return as Html, ...
Raym's user avatar
  • 51
0 votes
1 answer
426 views

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 ...
tron_jones's user avatar
0 votes
1 answer
650 views

Global Styles breaking Grommet styled-components styles

I've tried to change my existing App to use Grommet for the Inputs. It worked quite fine, but I got a problem with the styles. The react-App is included on different pages, so I have to deal with ...
Alexander Bogoslawski's user avatar
1 vote
0 answers
92 views

Is there a way to call an image uploaded from a FileInput in another component?

I'm using Grommet, and I created two FileInputs, and from the images they get a new image is generated. My question is: Is there a way to call the image I got from the FileInput in my Button? If yes, ...
mikwee's user avatar
  • 143
1 vote
1 answer
258 views

React Contextprovider force update Video Element to play Video

I'm using the React Context like this and got really stuck in how to update my video element (to play the video). Shouldn't the components update automatically when receiving the prop? Heres a ...
Tobi's user avatar
  • 73
1 vote
1 answer
702 views

Grommet - custom component in FormField

In the Grommet FormField documentation, it states under Component; The component may be custom as long it supports the properties of name, value, onChange (event => {}), while event has either ...
010's user avatar
  • 13
0 votes
1 answer
24 views

How can I have where the 'other' turns into a button where the user can input as much money as they want?

How can I have where the 'other' turns into a button where the user can input as much money as they want? I tried creating a const other with a button and putting {other} in the options tab like this ...
7k.luca's user avatar
  • 17
1 vote
1 answer
3k views

ESLint configuration in .eslintrc is invalid: - Unexpected top-level property "import/no-extraneous-dependencies"

I was writing a code to access webcam, click a picture through my react app or browse and upload the picture from your files. For using react-html5-camera-phot and grommet I was getting these errors, ...
NISHTHA GUPTA's user avatar
0 votes
1 answer
93 views

How to fix the clumped up text? How to fix the background not going all the way down?

In this code, my text on the sidebar side keeps no getting clumped up together. How can I fix that? Also, how can I extend the sidebar's background all the way to the point where it meets the footer ...
7k.luca's user avatar
  • 17
0 votes
1 answer
241 views

How can I make this dropdown show all of the fifty states instead of "option #"

Right now this code shows a dropdown form that lists "option #". How can I make all of the fifty states selectable instead of the option and a number? import React, { useState } from 'react';...
7k.luca's user avatar
  • 17
0 votes
1 answer
110 views

How to fix button to be interacted with, in carousel?

When I try to import a layer/button onto one of these cards it does not allow it to be clicked or interacted with. I believe the problem is with the carousel. What is a way I can fix this? The "...
7k.luca's user avatar
  • 17
-1 votes
1 answer
179 views

How can I make this into a working Carousel? The carousel pops up but the two arrows are not active

How can I make this into a working carousel that shows 3 or more cards at the same Carousel spin? Here is an example code that I've put together and had trouble showing more multiple cards on ...
7k.luca's user avatar
  • 17
1 vote
1 answer
436 views

How to add pagination to grommet datatable

I just took the example of https://v2.grommet.io/datatable and extended it with the pagination attribute, but this has no effect and the table doesn't change. <DataTable ...
Xiis's user avatar
  • 53
0 votes
1 answer
638 views

Show image as background in box in grommet

I am trying to set the background of a Box to a local image using the url property for background but it doesn't seem to take effect. I have created a sandbox to showcase the problem. I have added a ...
Varun Gupta's user avatar
  • 2,960
0 votes
0 answers
159 views

Grommet MaskedInput doesn't work with multiple inputs

I am using MaskedInput to create a time picker for my web app. I used the example present on the grommet website but I can't get it to work properly. For example, on the widget shown on the website ...
Varun Gupta's user avatar
  • 2,960
0 votes
2 answers
394 views

Grommet TextArea exports multiline text as a single line in the image

I want to export Grommet TextArea as an image. The following code works if there is just a single line of text. But if I adjust the TextArea component in a way to make the text fill multiple lines, ...
Anton Serov's user avatar
0 votes
1 answer
466 views

Specify different theme variables for a Layer or any other compoent in grommet

I want to show a Layer in one place with black background. So, I use the below theme setting: layer: { overlay: { background: 'black' } } Now I want to add show another ...
Varun Gupta's user avatar
  • 2,960
0 votes
1 answer
326 views

Don't show border below accordion in grommet

I am using grommet library for my web app. I want to know how can I avoid showing borders below FormFields and other controls such as Accordions. I have created a sandbox that demonstrates the problem ...
Varun Gupta's user avatar
  • 2,960
3 votes
2 answers
1k views

Custom button hover state in Grommet theme

Just started using Grommet. I must be missing something obvious because I feel like I'm trying to do something fairly simple. I've created a custom theme, and I'm trying to add a hover state to change ...
MrRay's user avatar
  • 972
1 vote
1 answer
182 views

edgeSize issue on different breakpoints in Grommet

Am little bit rookie on Grommet and having issues. I'm trying to set different edgeSize values for different breakpoints in Grommet v2.14.0 Here you can find theme code -> export const v3theme = { ...
bariskuran's user avatar
0 votes
1 answer
116 views

Specify props of a component imported from a UI library in styled-componennts

I am using grommet and styled-components. I have a few places where I use a component provided by grommet and set some similar props. I want to create a styled-components by using that component ...
Varun Gupta's user avatar
  • 2,960
0 votes
1 answer
714 views

CSS flexbox styles to fill width and height of elements

I am creating a web application for my react-native application. I feel quite comfortable in styling on react-native and was trying to use flexbox on the web also hoping it would allow me to use my ...
Varun Gupta's user avatar
  • 2,960
0 votes
2 answers
72 views

How to stop Grommet component from looping in Safari

I created a dynamic editor component with Grommet in my header and footer tabs. When the site is viewed in safari, each editor is changing its position when I make a change in the data like font size. ...
Aravind Jaimon's user avatar
1 vote
1 answer
1k views

Cypress unable to select multiselect with loop

I am writing a React application that I'm testing with Cypress. In my integration tests I've written a cypress command that takes an array of strings, in order to select items in a multi-value select ...
Ben Wainwright's user avatar
0 votes
1 answer
1k views

Can't Style Grommet icon inside Anchor

I'm new to Grommet with styled components. I Have already checked all the docs and can't find the solution. PROBLEM I have an Anchor with an icon and a label. Problem is I cannot target the icon for ...
rodspain's user avatar
1 vote
1 answer
2k views

How can i include Responsive Context to make my layout responsive on mobile?

I made an appliaction in React and used the library Grommet to design my components. I defined a theme file to set breakpoints for different mobile devices: const customBreakpoints = deepMerge(grommet,...
Preefix's user avatar
  • 253
0 votes
1 answer
149 views

Not able to display a label using <Meter> component from grommet

I am unable to display label separately for my graph. const Demo = () => ( <Box> {['bar', 'circle'].map(type => ( <Box key={type} margin={{ bottom: 'xsmall' }}> &...
pythonbee's user avatar
1 vote
1 answer
601 views

What is the right type definition to use for the onChange event for Grommet's RangeInput component?

I'm getting a typescript error for onChange of Grommet's RangeInput component. <RangeInput onChange={(event: React.ChangeEvent<HTMLInputElement>) => setAge(event.target.value) } /> ...
grabury's user avatar
  • 4,937
1 vote
3 answers
1k views

How to change the default text color with grommet io?

What variable do I have to set in my theme to change the base font color? Something like: const theme = deepMerge(base, { global: { font: { family: 'sans-serif', }, color: '#...
grabury's user avatar
  • 4,937
0 votes
1 answer
1k views

Creating a controlled form with Grommet throws errors

I am trying to create a basic form using Grommet following the examples at https://v2.grommet.io/form. My specific form looks like this: import React from 'react'; import { Box, Form, FormField, ...
seawolf's user avatar
  • 2,147
0 votes
2 answers
558 views

Design of a custom accordion

I am trying to design a custom accordion with these fancy red lines connecting parent and children (see photo). I am using Grommet components here but in summary, the layout it's just a bunch of divs ...
Ardenne's user avatar
  • 907
0 votes
1 answer
596 views

Changing button label on click with grommet?

Does anyone have any insight into changing button label on click when using grommet UI and styled components? Is it easier to just use a custom button rather than grommets?
Katie T's user avatar
  • 341
0 votes
1 answer
429 views

Does my Gatsby project have a react's rehydration issue?

I'm writing a simple project using Gatsby, Grommet and React, basically reads a markdown file then renderer; following the gatsby tuturials. Everything is Ok, except on the first load of any page. ...
Rodrigo's user avatar
  • 112