ChakraUI/V3/Update Chakra Provider

Last update

Oct 26, 2024

Updates the ChakraProvider import from @chakra-ui/react
Renames the theme prop to value to match the new system-based theming approach

Example

Before

import { ChakraProvider } from '@chakra-ui/react';

export const App = ({ Component }) => ( <
  ChakraProvider theme = { theme } >
  <
  Component / >
  <
  /ChakraProvider>
);

After

import { Provider } from '@/components/ui/provider';
import { defaultSystem } from '@chakra-ui/react';

export const App = ({ Component }) => ( <
  Provider value = { defaultSystem } >
  <
  Component / >
  <
  /Provider>
);

Updates the ChakraProvider import from @chakra-ui/react
Renames the theme prop to value to match the new system-based theming approach

Example

Before

import { ChakraProvider } from '@chakra-ui/react';

export const App = ({ Component }) => ( <
  ChakraProvider theme = { theme } >
  <
  Component / >
  <
  /ChakraProvider>
);

After

import { Provider } from '@/components/ui/provider';
import { defaultSystem } from '@chakra-ui/react';

export const App = ({ Component }) => ( <
  Provider value = { defaultSystem } >
  <
  Component / >
  <
  /Provider>
);

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now