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
1
vote
1 answer

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. ) => setAge(event.target.value) } /> Error: Type '(event: React.ChangeEvent) =>…
grabury
  • 4,797
  • 14
  • 67
  • 125
1
vote
3 answers

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: '#eeeeee', }, }); or const theme = deepMerge(base, { …
grabury
  • 4,797
  • 14
  • 67
  • 125
1
vote
1 answer

NodeJS: Download multiple files from GridFS and provide zip to the user on a button click

The front-end is written in ReactJS, more specifically grommet. There are multiple pdf files to be served to the user on clicking the Download button. The files are stored in GridFS. I wish to give the user a zipped folder which contains all these…
Ritik Saxena
  • 694
  • 1
  • 11
  • 23
1
vote
0 answers

How to style children nodes inside Grommet 2 React components

I have this problem: I want the calendar icon to render a little smaller, inside the input and equidistant from the three borders. I could achieve it by reducing the icon's padding and also its size, using CSS. The problem is that I have no idea on…
Juan Lanus
  • 2,293
  • 23
  • 18
1
vote
1 answer

How to resize the select component in grommet react js?

I am creating a form in the front end In that I use texInput, radio button, Select component. All the texInput, radio button component are in one size as per alloted but the select component size is very small please help me to solve the select…
Karthick S
  • 9
  • 1
1
vote
1 answer

Why is the span element rendered by the Text component from the Grommet library, able to get margin-top?

Normally spans should not get any margin-top, so what gives? Also, for some reason, if I place a Text instance inside a form element, then it no longer gets the margin-top as it normally should be the case? import React from 'react'; import { Text }…
Aiyaz N.
  • 31
  • 5
1
vote
0 answers

Google map does not shrink when user opens sidebar

I am new to both React and Grommet and have worked through the getting started tutorial. When I add a google map to the main container it renders and fills the whole screen. However, when I click the notification icon to load the sidebar it only…
AloysiusG
  • 13
  • 5
1
vote
2 answers

Grommet - border radius; can it be adjusted globally?

Grommet looks interesting. Not sure I'm in love with button border radius; is there a theme way to reset button radius on all Grommet buttons globally?
Dave Edelhart
  • 1,051
  • 1
  • 9
  • 13
1
vote
1 answer

How to display selected Listbox value in ReactJS from state

What I want to do is select an item from the ListBox and display it in the same WebPage. The ListBox renders correctly, but when I try to Output the selected value, it shows target undefined. Refer comments in code. I tried using event.target.value…
animesharma
  • 81
  • 1
  • 2
  • 9
1
vote
1 answer

Getting rid of browser warning when using Grommet Anchor as Link from react-router-dom

Grommet Anchor 'tag' property type expects 'string', so using Link from react-router-dom creates a console warning. Except the warning, everything works fine. Warning: Failed prop type: Invalid prop tag of type function supplied to Anchor,…
BezobidnijPsih
  • 54
  • 6
1
vote
0 answers

Grommet min css file size is 393kb, can we reduce the size?

The grommet.min.css is 393kb, if i use the sass loader in webpack and import grommet index.scss, the bundle size increases by 468kb. Is there anyway to reduce this size? How can we include only the styles that are needed? Thanks
Abhijeet Ramgir
  • 51
  • 1
  • 2
  • 8
1
vote
0 answers

How to enable Grommet sidebar menu within split on mobile

Hi I'm new to Grommet and development in general. I'm having some trouble with displaying a mobile menu. When a screen hits a certain size the split view shows only the right side of the screen, giving you no access to the menu.
Jnamu
  • 21
  • 8
1
vote
2 answers

Grommet UI how to modify the size of the components?

I try to use the components from the Grommet UI with ReactJs. I would like to understand if there is a way to use an existing Grommet theme in order to have smaller components (text input, number input, datetime) or I have to customize by overriding…
Vicking
  • 553
  • 6
  • 15
1
vote
1 answer

Why is TableRow not hoverable in Grommet?

I'm using grommet to develop an app. A bunch of the components in the library have an onClick prop and when you supply a callback function to the onClick prop of a component it becomes hoverable. But this doesn't seem to happen for the TableRow…
John Devitt
  • 690
  • 2
  • 8
  • 22
1
vote
1 answer

React Router HashRouter inserting a ? before # in url

I'm getting some strange behaviour with react/redux/react-router on Chrome. I have a component that looks like this: const PageHeader = withRouter( props =>
props.history.push("/search")} > {/*component…
John Devitt
  • 690
  • 2
  • 8
  • 22
1 2
3
4 5 6 7