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
7
votes
3 answers

Grommet UI -- Custom Color Schemes

I'm using grommet-ui with webpack and react. How do I set my own color options. Is there a way to use my own custom colors/color schemes in place of predefined colors like colorIndex="neutral-1".
user4076248
  • 433
  • 2
  • 5
  • 10
6
votes
1 answer

React Grommet Select - passing in object data as options

I am using Grommet v2 components and trying to mirror the display used in the Select 'Seasons' example in Grommet's storybook. The field appears like this: The difference is my data needs to separate label and value: const Options = [ { …
Brantley English
  • 378
  • 1
  • 9
5
votes
1 answer

React calling another component

I am using Grommet and am trying to get Layer (pretty much a modal) to work when a button is pressed. I know that my onClick works because I tried a simple console.log and it works. MyModal is also able to be displayed if I use ReactDOM and render…
user3034572
  • 95
  • 1
  • 3
  • 9
4
votes
1 answer

How to test enzyme components that render into the top level

I'm trying to test a component that renders a grommet Menu component. The grommetMenu component renders an absolutely positioned menu into the top level of the document, inserted as a child to body. Therefore it renders outside the scope of the…
Jake Dluhy
  • 617
  • 6
  • 19
3
votes
2 answers

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 the background color of a Button. The default…
MrRay
  • 952
  • 2
  • 10
  • 16
3
votes
2 answers

Show overlay only once on page entrance (not route change). HowTo?

So I try to have an overlay over my gatsby site for about a split second to let it load the correct breakpoint in the back. How can I achieve this? So I set an Interval and some State to load the Overlay and make it disappear after an interval. But…
TheWeeezel
  • 331
  • 1
  • 4
  • 16
3
votes
1 answer

Grommet integration with create-react-app

i'm looking for a way to integrate grommet framework to a react app created with the cli. I want to use react grommet components inside my app but there are some problems with the preprocessor SCSS. Today, I tried to integrate them in a lot of …
Luca Valsecchi
  • 81
  • 8
3
votes
1 answer

Grommet: Top and Bottom Tab activate the same content

I'm wondering is there a way to set Tabs top and Bottom to display the tabs content using grommet tabs component: example of what I am looking to do can be seen in the image below. https://i.stack.imgur.com/d6YES.jpg I have a sample codepen with a…
user3292394
  • 609
  • 2
  • 11
  • 24
3
votes
2 answers

React-boilerplate+grommet, making sass work with webpack

I have more than 10 years of exp in Python and Flask with primary focus on backend and very little HTML + JavaScript however zero CSS. I started on React and JavaScript about 6 weeks ago and made simple apps using react which did not required much…
user2767799
  • 43
  • 6
3
votes
4 answers

Using Grommet with ReactJS webpack and scss import Issue

I am trying to use grommet in my React Project and i am using webpack. I have added the scss loader and when i build my app i am getting the following error: ERROR in ./~/css-loader!./~/sass-loader!./scss/index.scss Module build failed: @import…
Sateesh K
  • 1,071
  • 3
  • 19
  • 45
2
votes
0 answers

.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 the form data, and you have to enter 3 string…
Ryan Speciale
  • 95
  • 8
2
votes
0 answers

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 when the marker is being clicked on, as…
TheIlluminadi
  • 37
  • 2
2
votes
0 answers

Grommet - How to use a Select component with search?

Here is my basic implementation of a Select component with server-side searches inside FormField: export default function AddProduct() { const [form, setForm] = useState({ category_id: '' }) const [categories, setCategories] = useState([]) …
Alexandre Thebaldi
  • 4,546
  • 6
  • 41
  • 55
2
votes
1 answer

Which components are adding emotion css global styles

Two global syles entries are added to my pages and I cannot have control over them. Could you help me to understand which components are injecting them? App developed in gatsby using: Grommet Styled components Code gets included in header…
Muntram van Chen
  • 403
  • 1
  • 5
  • 10
2
votes
1 answer

Can't deselect initial values from Select component with options and values as an object

I can't unselect the default values I have set in state. I'm pulling from an example in Grommet's codesandbox. Only change thus far is adding an object array instead of an array of strings. See VALUE prop in docs mention object array.. const OPTIONS…
Brantley English
  • 378
  • 1
  • 9
1
2 3 4 5 6 7