Although it may go against Astro's original purpose, you still want to use mantine.dev with Astro
The main reason why Astro cannot work with mantine.dev is that Astro does not share the React Context. this makes the MantineProvider not usable and causes the page to crash.
[!TIP]
for example
When your astro parts are set up like this,
<BasicLayout>
<MantineProvider
defaultColorScheme='dark'
client:only='react'
>
<Content client:load />
</MantineProvider>
</BasicLayout>[!IMPORTANT]
Will receive an error message:
ERROR: @mantine/core: MantineProvider was not found in component tree, make sure you have it in your app
Use a specific React component as the main part to give the shared features of ReactContext, and show it as the only main part in Astro with client:load
[!CAUTION]
It's Working, as pseudocode below:
//
// Create a React component that integrates MantineProvider as the root component for an Astro island component
export const createAstroComponent = (config: { component: React.ComponentType<React.PropsWithChildren> }) => {
function MantineContextContainer() {
return (
<MantineProvider defaultColorScheme='dark'>
<config.component />
</MantineProvider>
)
}
return MantineContextContainer
}
//
// Create your Mantine interactive component layout and export it for Astro.
export const DemoContainer = createAstroComponent((props: React.PropsWithChildren) => {
return (props: React.PropsWithChildren) => {
const [title, setTitle] = useState('')
const [items, setItems] = useState<string[]>(['111', '222', '333', '444', '555', '666'])
return (
<SimpleGrid>
<TextInput
value={title}
onChange={(current) => {
setTitle(current.target.value)
}}
label='Add a task to the to-do list'
/>
<Button
color='orange'
onClick={() => {
setItems((prev) => ([...prev, title]))
setTitle(() => '')
}}
>
Add
</Button>
</SimpleGrid>
)
})
}pnpm i @aqzhyi/astro-react-mantine -S
[!NOTE]
import
<MantineLayout />in ./src/pages/_MyLayout.astro
---
import { Head, MantineLayout } from '@aqzhyi/astro-react-mantine'
---
<MantineLayout
lang='zh-TW'
{...Astro.props}
>
<Head>
<meta
name='keywords'
content={'aqzhyi, github, library, packages, docs, astro, react, mantine, layout, ui'}
/>
</Head>
<slot />
</MantineLayout>