Stack Overflow
Stack Overflow

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
2
votes
1 answer

Grommet: TypeError: Cannot read property 'modelSchemas' of undefined

I'm using grommet version 1.3.4 and trying to use mongodb with node js and express. When I run npm install I get the following TypeError: /home/jorge/Desktop/crud-app/node_modules/mongoose/lib/index.js:373 if (!this.modelSchemas[name]) { …
Jorge Hernandez
  • 151
  • 5
2
votes
1 answer

Is a horizontal for possible with Grommet?

I would like to create a horizontal or inline form with the Grommet React library. I am loving it but either I am missing something, or some simple things like inline forms are not possible with it. Can anyone shed any light on how to achieve the…
Zacho
  • 831
  • 11
  • 19
2
votes
2 answers

How to reduce webpack bundle size in grommet?

I'm using Grommet. I've followed the getting started guide and made my first application. The webpack bundle generated for production is a single JavaScript file that exceeds 1.7 MB and I didn't add anything to the get started example. Is there is a…
Ahmed Abdelrahman
  • 778
  • 3
  • 12
  • 30
1
vote
2 answers

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 buttons, the highlighted area is like: Pure css is…
Jim Jin
  • 1,249
  • 1
  • 15
  • 28
1
vote
0 answers

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 at the end). I wrap a Layout with the Grommet…
hammygoonan
  • 2,125
  • 2
  • 21
  • 36
1
vote
0 answers

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 }) => console.log('Submit', value) and got the…
CoderNumber10002
  • 13
  • 5
1
vote
2 answers

Loop function inside html in javascript (React)

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, using "id" and "getElementById" but I can't make it…
Raym
  • 51
  • 6
1
vote
0 answers

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, how? Thanks for any answer. Code (Took out some…
mikwee
  • 133
  • 2
  • 14
1
vote
1 answer

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 simplified version of my code: import React, { useState…
Tobi
  • 73
  • 8
1
vote
1 answer

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 event.value or event.target.value. I'd like to…
010
  • 13
  • 1
  • 3
1
vote
1 answer

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, Basically the error was…
NISHTHA GUPTA
  • 11
  • 1
  • 2
1
vote
1 answer

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.
Xiis
  • 53
  • 5
1
vote
1 answer

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 = { global: { edgeSize: { none: "0px", …
bariskuran
  • 21
  • 3
1
vote
1 answer

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 box. The code I'm using looks roughly like…
Ben Wainwright
  • 4,224
  • 1
  • 18
  • 36
1
vote
1 answer

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, { global: { breakpoints: { small:…
Preefix
  • 243
  • 2
  • 13
1
2
3 4 5 6 7