Skip to content

Instantly share code, notes, and snippets.

@TheThirdRace
TheThirdRace / Button.ts
Last active April 7, 2021 20:54
A utility helper to add the same functionality as `useStyleConfig`, but within the theme itself
//
// theme/Button.ts
//
import { ComponentSingleStyleConfig, SystemStyleObject, ThemeComponentProps } from '@chakra-ui/react'
export const Button: ComponentSingleStyleConfig = {
baseStyle: {},
variants: {
ghostLight: (props: ThemeComponentProps): SystemStyleObject => getStyleConfig({
@TheThirdRace
TheThirdRace / Image.tsx
Last active February 6, 2024 15:20
Image component: merge Chakra-ui `2.8.0` with NextJs `13.4.13` and remove most pain points
/**
* # `<Image>`
*
* This component is a merge between `next/image` and `Chakra-ui`.
* - last updated on 2023-08-08 with `next/image` 13.4.13 and `chakra-ui/react` 2.8.0
* - https://github.com/vercel/next.js/blob/v13.4.13/packages/next/src/client/image-component.tsx
* - https://github.com/vercel/next.js/blob/canary/packages/next/src/client/image-component.tsx
* - https://github.com/vercel/next.js/commits/canary/packages/next/src/client/image-component.tsx
* - https://github.com/vercel/next.js/compare/v13.4.4...canary
*