0.1.2 • Published 11 months ago
@aqzhyi/astro-react-mantine v0.1.2
@aqzhyi/astro-react-mantine
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.
for example
When your astro parts are set up like this,
<BasicLayout>
<MantineProvider
defaultColorScheme='dark'
client:only='react'
>
<Content client:load />
</MantineProvider>
</BasicLayout>Will receive an error message:
ERROR: @mantine/core: MantineProvider was not found in component tree, make sure you have it in your app
Current Solution
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
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>
)
})
}Installation
pnpm i @aqzhyi/astro-react-mantine -SUsage
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>