@aqzhyi/astro-react-mantine
v0.1.1
Published
Although it may slightly conflict with Astro's original intent, you remain dedicated to integrating mantine UI within Astro.
Downloads
46
Maintainers
pleasurazyReadme
@aqzhyi/astro-react-mantine
While it may somewhat contradict Astro's original purpose, you remain committed to utilizing mantine.dev within Astro.
The primary reason why Astro cannot be used in conjunction with mantine.dev is that Astro does not share the React Context, which results in the MantineProvider being unusable and consequently causes the page to crash.
for example:
When your Astro components are arranged in such a manner,
<BasicLayout>
<MantineProvider
defaultColorScheme='dark'
client:only='react'
>
<Content client:load />
</MantineProvider>
</BasicLayout>You 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
Utilize a specific React component as the root component to provide the shared capabilities of ReactContext, and render it as the sole root component island in Astro with client:load.
Pseudocode
//
// 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>
)
})
}Additionally, please remember to provide <ColorSchemeScript> and mantine.css at the Astro Layout level. (when version >= 7)
./pages/Layout.astro
---
+ import { MantineHead } from '@aqzhyi/astro-react-mantine'
---
<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>DEMO</title>
+ <MantineHead />
</head>
<body id='__body'>
<slot />
</body>
</html>and it's works
./pages/index.astro
---
import BasicLayout from './_layout/BasicLayout.astro'
import { MantineContext } from './_react/MantineContext'
import { Content } from './index.Content'
---
<BasicLayout>
<Content client:load />
</BasicLayout>