Questions tagged [grommet]
grommet tag is used to mark questions related to grommet framework
101
questions
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.
...
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/...
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 ...
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
...
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 ...
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 { ...
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: [...
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 ...
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 ...
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 = {
...
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 ...
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 ...
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 ...
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 ...
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 }...
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 ...
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 ...
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, ...
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 ...
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 ...
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, ...
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 ...
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 ...
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 ...
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, ...
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 ...
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';...
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 "...
-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 ...
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
...
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 ...
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
...
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, ...
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 ...
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 ...
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 ...
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 = {
...
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 ...
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 ...
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. ...
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 ...
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 ...
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,...
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' }}>
&...
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)
}
/>
...
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: '#...
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, ...
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 ...
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?
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.
...