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

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, TextInput, Button } from 'grommet'; const…
seawolf
  • 2,147
  • 3
  • 20
  • 37
0
votes
2 answers

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 (the Box tag) and a collapsible panel component…
Ardenne
  • 897
  • 2
  • 13
  • 23
0
votes
1 answer

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
  • 341
  • 2
  • 6
0
votes
1 answer

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. The main content disappear soon after it render…
Rodrigo
  • 135
  • 4
  • 45
  • 107
0
votes
1 answer

How to use "grommet" without node.js?

I heard "grommet with reactjs" has good UI. So I want to try "grommet" on my environment. But I couldn't understand how to use "grommet". Because I expected this module can work on usual internet browser only. But sometime some websites explained…
Ichiro
  • 103
  • 1
  • 8
0
votes
3 answers

How to change active border colour of grommet v2 FormField?

I'm trying to create app theme with grommet v2. I'm using Form and FormField from grommet components to crate froms. When FormField is active the bottom-border changes colour to default accent-1 and I can't change this border colour. I have theme.js…
OMGImOut
  • 172
  • 4
  • 10
0
votes
2 answers

How to capitalise text in Grommet's Heading component?

I am using grommet for React project & wondering how I can capitalise text in couple of component.
Ishan Patel
  • 5,571
  • 12
  • 47
  • 68
0
votes
1 answer

Setting a unique Key on a Grommet DataTable Reactjs

I encountered an error earlier: Warning: Encountered two children with the same key,project. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the…
eoan
  • 111
  • 1
  • 9
0
votes
1 answer

Map an array created from a variable to render said number of elements in Grommet

I have a textbox where user inputs a number which is stored in a state value. Now I want to create an array [0, 1, 2, ..., value]. This array will be used to create (value + 1) number of boxes/divs each with their corresponding ids. Now I've tried…
Shivam Singha
  • 13
  • 1
  • 5
0
votes
1 answer

Can't include React UI frameworks (Grommet)

I have problems importing UI libraries, I had problem with ant design library so I decided to try different one, now I have problem importing Grommet. What am I doing wrong? I added dependencies according documentation and added examples included in…
tarek hassan
  • 772
  • 11
  • 35
0
votes
1 answer

Grommet Split children issues("Warning: Failed prop type: Invalid prop `children` of type `object` supplied to `Split`, expected an array.")

Warning: Failed prop type: Invalid prop children of type object supplied to Split, expected an array. I am getting this warning in my console, for following code,
Jani Devang
  • 1,099
  • 12
  • 20
0
votes
1 answer

How to remove space between edge of box and side of screen in Grommet

I'm starting to learn Grommet (UX framework for React). Following their tutorial, I went on http://grommet.io/docs/hello-world to play around on CodePen (https://codepen.io/pen?template=gaEGPY&editors=0010). I want to make a website that has a…
vkalahas
  • 11
  • 2
0
votes
1 answer

How to make a column layout in grommet

I'm using Grommet React library for ux. I'm working on a phone layout project. I've a prop from redux state that represent an array of element. The initial state is empty array and, after server returning, the props will be [{ country: 'England' },…
user2540463
  • 112
  • 1
  • 3
  • 10
0
votes
2 answers

Testing grommet Layer component

I'm using grommet with react to render my application's UI. I have a Layer component shown when user click a button. Everything works fine but I don't know how to test Layer's children. I'm using enzyme, mocha and chai as test suite. This is code…
alessia pileri
  • 152
  • 4
0
votes
2 answers

How to override default styles in Grommet?

I have a grommet JS project in which I am using a LoginForm component. I have gone through the component's help page and can see the functionality that it provides. Here is the reference: https://grommet.github.io/docs/login-form But, What if I…
kokaneka
  • 11
  • 1
1 2 3 4 5
6
7