Chakra UI is a simple, modular and accessible component library for React applications.
Questions tagged [chakra-ui]
78 questions
5
votes
1 answer
I want to create a custom radioButton with framer-motion
We are using react and typescript.
The design library is chakra-ui.
We are using framer-motion for animation.
What I want to do
I want to create original radio buttons.
RadioButton behavior
When the user hovers the button → the radio button turns…
ryuma
- 89
- 5
4
votes
2 answers
Intersection Observer API going into infinite rendering loop
I am trying to use the intersection observer API to conditionally display items in a CSS grid when the user starts scrolling, but it seems to go into an infinite rendering loop. Here is my code.
Here is the link to my live code on StackBlitz
Also…
Soham Dasgupta
- 4,675
- 20
- 70
- 120
4
votes
1 answer
Chakra UI using multiple models in a single component
I am using chakra ui and I want to use two modals in a single component.
const { isOpen , onOpen, onClose } = useDisclosure()
Pasan Madhushan
- 45
- 4
3
votes
1 answer
Next.js "_framerMotion.motion.custom is not a function"
I have a problem with Chakra UI in Next.js. I have installed all packages normally. And I have edited the _app.tsx.
import { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react'
import '../styles/globals.css'
function…
myB
- 59
- 4
3
votes
1 answer
Unable to use two modals on same page using useDisclosure() in ChakraUI
There is a custom hook useDisclosure() provided by chakraUI which returns isOpen, onClose , onOpen.
const { isOpen, onOpen, onClose } = useDisclosure()
The onOpen is passed to the onClick of the button which is triggered to open the modal.
Ibad Shaikh
- 192
- 2
- 11
3
votes
2 answers
How to add ::-webkit-scrollbar pseudo element in Chakra UI element? (React)
I'm working with Chakra UI and i needed to customize the scrollbar style using the css pseudo element ::-webkit-scrollbar, but Chakra UI doesn't seen to have this pseudo element and a I don't know where I can style this specific component without…
Gabriel Mochi
- 120
- 6
3
votes
1 answer
extendTheme for Chakra-ui in Gatsby
I am working in Gatbsy and when I try and override the core Chakra theme using a shadow theme.js file in a gatsby-plugin-chakra-ui folder it has no effect.
Any thoughts please? I am using
import { extendTheme } from '@chakra-ui/core'
const theme =…
Nick Wild
- 395
- 1
- 6
- 18
2
votes
0 answers
setter setDate not updating state of date variable
Basically, I have a picker that picks the country upon which whichCountry is set to that value and the date Api is called which extracts the date of that country and gives it to the setter which is supposed to set the date variable to that. for the…
Maverick
- 63
- 6
2
votes
1 answer
Chakra ui unit test with useMediaQuery
I have the following simple test:
jest.mock("@chakra-ui/react", () => ({
useMediaQuery: jest.fn().mockImplementation(() => ({
isMobile: false,
})),
chakra: jest.fn(),
}))
describe("TopUp card", () => {
test("should render correctly", ()…
Alessandro
- 4,405
- 15
- 55
- 108
2
votes
1 answer
Can't change default fonts in Chakra UI
Working with Chakra for the first time and trying to change the default font to Times New Roman in Chakra UI but get no effect.
Did an import, assigned new theme, passed it as props to ChakraProvider but nothing happens in code
index.js
import…
MacRobot
- 21
- 1
2
votes
2 answers
Why does @chakra-ui/gatsby-plugin crashes gatsby?
Trying to apply ChakraUI to my gatsby project.
I've installed all the necessary packages
"@chakra-ui/gatsby-plugin": "^1.0.1"
"@chakra-ui/react": "^1.1.3"
"@emotion/react": "^11.1.4"
"@emotion/styled": "^11.0.0"
"framer-motion": "^3.2.0"
then added…
James
- 23
- 4
2
votes
3 answers
Chakra UI Setup with Next.js Throwing Error
I'm looking to get Chakra UI set up (latest V1) with a simple Next.js app. Having followed the 'getting started' steps at https://chakra-ui.com/docs/getting-started I'm running into the following error when running dev server:
error -…
jason ewins
- 33
- 6
2
votes
0 answers
ChakraUI React import Module not found: Can't resolve '@public/icons'
I have found similar questions here on stackoverflow and none of it helped to solve my issue
I have a icons.js file in public where i export various icons to the pages
And on the page i import that particular file using
import { FastFeedbackIcon }…
Sandrin Joy
- 1,114
- 3
- 20
2
votes
1 answer
Chakra UI colorScheme prop on button
i extended the theme provider in chakra_ui
import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import App from "./App";
const theme = extendTheme({
colors: {
brand: {
…
AbdulAzeez Olanrewaju
- 480
- 2
- 12
1
vote
0 answers
Next.JS app (with Chakra UI) not full width on mobile devices
This one is giving me a headache..
Perhaps I'm just missing something silly, hope you guys can help.
The whole html element has a width of approximately 80% of the screen on mobile devices.
On a laptop, reducing the screen size does not replicate…
sniv
- 31
- 2