1

I'm Developing a Component library for my company internal projects and will use that as a npm package. I'm using Mantine as a starter and will add customization using tailwind. I wrote this as a test button just to check things

import React from "react";
import { Button as MantineButton } from "@mantine/core";
import PropTypes from "prop-types";

const ButtonTest = ({ label, backgroundColor = "red", handleClick }) => {
  const style = {
    backgroundColor,
    border: "none",
    padding: "10px",
  };
  return (
    <div>
      <MantineButton onClick={handleClick} style={style}>
        {label}
      </MantineButton>
    </div>
  );
};

ButtonTest.prototypes = {
  label: PropTypes.string,
  backgroundColor: PropTypes.string,
  handleClick: PropTypes.func,
};

export default ButtonTest;

and in index file on root in react app I'm exporting this component and then publish this component on npm.

on another app when i tried to use this, it returns this error TypeError: Cannot read properties of null (reading 'useContext') I know this error is related to MantineProvider but where can i use mantine provider in my code to fix this error i tried to wrap my app in mantine provider in another project where i'm using this package but still same error.

Haseeb Ali
  • 43
  • 3
  • I guess you need to wrap your root component with MantineProvide where you have defined the component. Not where you are using it. – CodeThing May 22 '23 at 06:20
  • @CodeThing this is my index.js file of src/components `import ButtonTest from "./ButtonTest"; export {ButtonTest};` in RollupConfig.js i passed this path. where should i wrap? – Haseeb Ali May 22 '23 at 06:33
  • Try wrapping this button component itself inside return. – CodeThing May 22 '23 at 06:37
  • If you are suggesting like this ` {label} ` It still gave same error – Haseeb Ali May 22 '23 at 06:39

0 Answers0