New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@aqzhyi/astro-react-mantine

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@aqzhyi/astro-react-mantine

Although it may slightly conflict with Astro's original intent, you remain dedicated to integrating mantine UI within Astro.

0.1.2
latest
Source
npm

Version published: 2 months ago

Maintainers: 1

Created: 4 months ago

Source

@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.

[!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

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

[!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>
    )
  })
}

Installation

pnpm i @aqzhyi/astro-react-mantine -S

Usage

[!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>

Keywords

FAQs

What is @aqzhyi/astro-react-mantine?

Is @aqzhyi/astro-react-mantine well maintained?

Package last updated on 17 Dec 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@aqzhyi/astro-react-mantine

@aqzhyi/astro-react-mantine

Current Solution

Installation

Usage

Keywords

Related posts

Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional

Maven Central Adds Sigstore Signature Validation